Question

I know this would involve Jquery, I am not as learned as I’d like to be in mocking this up myself. I know there is a toggle function, but dont know how I’d mock this up for my own use.

This might be possible in css3 too? But Im guessing Jquery would be a better cross browser solution.

Answer 1

Assuming you have a button, or other element, with a specific id:

$('#id').click(
    function(){
        $('.className').toggle();
    });

Or, to be a little prettier:

$('#id').click(
    function(){
        $('.className').fadeToggle();
        /* or:
        $('.className').slideToggle();
        */
    });

This is, given some fairly specific mark-up constraints and low cross-browser compatibility requirements, possible in CSS, albeit only in CSS3:

HTML:

​<a href="#show">Show all</a>
    <div id="show">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <a href="#">hide</a>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

div {
    height: 0;
}
div > a {
    opacity: 0;
}
div:target a {
    opacity: 1;
}

div > ​div {
    height: 0;
    width: 0;
    margin: 0 auto;
    border-width: 0;
    border-style: solid;
    border-color: #000;
    border-radius: 1em 0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

div:target > div​ {
    height: 200px;
    width: 200px;
    border-width: 2px;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}​

JS Fiddle demo.

The above can be adapted to apply, of course, to specific classes rather than all div elements, and this is one (though perhaps not the only) way to work with specific classes, using the general sibling combinator ~:

HTML:

<a href="#show">Show all</a>
<a href="#firstOne">Show all '.one' elements</a>
<a href="#firstTwo">Show all '.two' elements</a>
<div id="show">
    <div></div>
    <div id="firstOne" class="one"></div>
    <div id="firstTwo" class="two"></div>
    <div></div>
    <div class="one"></div>
    <div></div>
    <div class="two"></div>
    <div class="one"></div>
    <a href="#">hide</a>
</div>​

CSS:

div {
    height: 0;
}
div > a {
    opacity: 0;
}
div:target a {
    opacity: 1;
}

div > div {
    height: 0;
    width: 0;
    margin: 0 auto;
    border-width: 0;
    border-style: solid;
    border-color: #000;
    border-radius: 1em 0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

div:target > div {
    height: 200px;
    width: 200px;
    border-width: 2px;
    background-color: #ccc;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

div:target > .one,
.one {
    background-color: #ffa;
}

div:target > .two,
.two {
    background-color: #f90;
}

.one:target,
.one:target ~ .one {
    height: 200px;
    width: 200px;
    border-width: 2px;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.two:target,
.two:target ~ .two {
    height: 200px;
    width: 200px;
    border-width: 2px;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

JS Fiddle demo.

Bear in mind, though, that CSS selection can only select elements that appear later in the DOM, so to show all the div elements of class="one" the target for the link has to be the first element of that class, so, to be concise, the target has to be, literally, the #firstOne. Hence the name, really, but it seemed worth specifying that.

References:

• fadeToggle().
• General Sibling combinators, and :target pseudo-class, at the W3.
• slideToggle().
• toggle().