Question

I have multiple divs like setted up below. I want 1 (one) JQuery function that onclick of ahref (.hide), Hide the data inside the <div class="data">.

1. This should be 1 function that can hide multiple DIV’s
2. An explanation would be great if using the jquery this selector, I suspect this is what I need.
3.Keep it simple!
4. Also a nice sliding toggle effect would be great, to slide up and down on click.

I attempted this, but I had to make different jquery code for each div, which is… long..

Thanks for any help!! and hopefully correct answers!!

<div id="uniqueDiv1" class="frame">
    <a href="#" class="hide">Hide</a> // On click of this Div
        <div class="data">
            <pre>data</pre>           // Hide This Div or Data
        </pre>
</div>

<div id="uniqueDiv2" class="frame">
    <a href="#" class="hide">Hide</a> // On click of this Div
        <div class="data">
            <pre>data</pre>           // Hide This Div or Data
        </pre>
</div>


<remember> I want 1 simple Jquery DOM function for all Multiple Divs </remember>

Answer 1

You could it like this:

$('div.frame a.hide').click(function(e){
   e.preventDefault();
   $(this).next('div.data').toggle(); 
});

http://jsfiddle.net/niklasvh/QbDMs/

• The $('div.frame a.hide') selects all the “hide” links.
• The e.preventDefault(); prevents the default link action
• The $(this).next('div.data').toggle(); selects the next div with class="data" and toggles its visibility

edit
– You didn’t mention this, but if you want to toggle the text on the button as well, you could add:

if ($(this).text()=='Show'){
     $(this).text('Hide');   
    }else{
     $(this).text('Show');   
}

making the final code look like:

$('div.frame a.hide').click(function(e){
   e.preventDefault();
   var div =$(this).next('div.data').slideToggle(); 
    if ($(this).text()=='Show'){
     $(this).text('Hide');   
    }else{
     $(this).text('Show');   
    }
});