显示在桌面上的列，触发移动列

我有here (JSFiddle)是2列，每个50％，这将是一个桌面布局。现在在移动视口中，通常我们只是将列设置为100％，在我的情况下，应该隐藏right列。并且只有在left列中的链接触发时才会显示。我怎样才能做到这一点？因为我不知道。显示在桌面上的列，触发移动列

<div class="container"> 
<div class="col left"> 
    <p><a href="#">Expand Right Column on mobile only</a></p> 
</div> 
<div class="col right"> 
    <p>Content to be showed on desktop and expanded on mobile via trigger above</p> 
</div>

来源

2015-09-29 Vadim Badea

@media (max-width: 800px) { 
    .left, .right { 
     width: 100%; 

    } 
    .right{display: none;} 
}

这应该做它添加显示：无;

EDIT1：要显示隐藏的div使用这样的：

<div class="container"> 
    <div class="col left"> 
     <p><button type="button" 
onclick="document.getElementById('right').style.display = 'block'"> 
Click Me!</button></p> 
    </div> 
    <div id="right" class="col right"> 
     <p>Content to be showed on desktop and expanded on mobile via trigger above</p> 
    </div> 
</div>

Here's the JSFiddle

EDIT2：JSFiddle to toggle the display attribute

来源

2015-09-29 08:12:57

试试我的编辑，让我知道，如果它不是你所需要的。 –

好的，现在我明白了。但是如果我想再次隐藏它呢？我怎样才能做到这一点？ –

http://jsfiddle.net/01991tj3/2/试试这个（也是编辑答案） –

显示在桌面上的列，触发移动列

回答

相关问题