Question

I have some css lines that allow me to hide/show a div. I would like to have links in this div, but when I test the link, it ends up hiding the div, it does not actually follow the link.
So, I want to be able to show the content, click the link. The content should remain open, and the link should be followed. Hope this makes sense!

<p>some text I want to show</p>
    <a href="#" class="hide">[...]</a>
    <a href="#" class="show">[...]</a>
    <div id="list">
      <p>bla bla, you should look on <a href="http://www.google.com">google</a></p>
    </div>

css

.show {
  display: none;
}

#list {
  display: none;
}

.hide:focus + .show {
  display: inline;
}

.hide:focus {
  display: none;
}

.hide:focus ~ #list {
  display: block;
}

I also made my first fiddle.

As always, any help is appreciated!

Answer 1

使用Javascript / Jquery

Jquery的

jQuery(function($){
             $('#hideme').click(function(){
             $('#list').addClass('hidden')
           $('#list').removeClass('expand')
             })
        })

jQuery(function($){
             $('#showme').click(function(){
             $('#list').addClass('expand')
           $('#list').removeClass('hidden')
             })
        })

DEMO

使用Pure CSS

HTML

<p>some text I want to show</p>
<div>
<a href="#" class="hide">[...]</a>
<a href="#" class="show">[...]</a>
<p id="list">bla bla, you should look on <a href="http://www.google.com">google</a></p>
</div>

CSS

.hide:focus + .show + #list{
  display:none;
}

.show:focus + #list{
  display:block ;
}

#list{
  display:none;
}

DEMO

How to use links within a show/hide div

1 个答案: