CODEWITHSUNDEEP
jqueryhtmlcss
Jakedinosaur
Jakedinosaur

Reputation: 13

How do I make an onclick event that would close/open all instances of a specific class on the page?

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.

Upvotes: 1

Views: 141

Answers (5)

David Thomas
David Thomas

Reputation: 253328

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:

Upvotes: 3

Seb
Seb

Reputation: 100

$(this).click(function(){


   $("element_to_delete").toggle();


});

If you want to Hide/Show

Upvotes: 0

adeneo
adeneo

Reputation: 318252

$('.myclass').on('click', function() { $(this).slideToggle('fast'); });

Upvotes: 0

ChristopheCVB
ChristopheCVB

Reputation: 7315

Try :

$(button).click(function(){
    $('.yourclassname').toggle();
});

Here is some documentation on the jQuery.toggle function : http://api.jquery.com/toggle/

Upvotes: 2

tzerb
tzerb

Reputation: 1433

I'm not sure how you'd do it in css3 but in jquery you use the class selector (".class").

Upvotes: 0

Related Questions