CODEWITHSUNDEEP
jquerytoggle
Jane Curtin
Jane Curtin

Reputation: 13

JQuery, toggle, passing in a variable

I'm new to jQuery and have setup a function to toggle a div open/closed. Works great. But I have 6 places I need it on the page. So would like to change the id #show as a passed in variable to I can accomplish this for 6 divs using one jQuery function.

<script>
$(function(){
$('.myClass').hide();
$('#show').toggle(function(){
$('.myClass').slideDown("fast"); 
$(this).attr("src","/images/minus.png" );
},function(){
$('.myClass').slideUp("fast"); 
$(this).attr("src", "/images/plus.png" );
});
}); 
</script>

<h2><img id="show" src="/images/plus.png"><span class="toggleText">DivisionI</span>    
</h2>
<div class="myClass">
my code to show....
</div>

Upvotes: 1

Views: 3307

Answers (2)

Hank
Hank

Reputation: 731

<script>
$(function(){
    $('.myClass').hide();
    $('.show').toggle(function(){
        var showdiv = $(this).attr("id");
        $('.' + showdiv).slideDown("fast"); 
        $(this).attr("src","/images/minus.png" );
    },function(){
        var showdiv = $(this).attr("id");
        $('.' + showdiv).slideUp("fast"); 
        $(this).attr("src", "/images/plus.png" );
    });
}); 
</script>

<h2><img id="show1" class="show" src="/images/plus.png"><span class="toggleText">DivisionI</span>    
</h2>
<div class="show1 myclass">
my code to show....
</div>
<h2><img id="show2" class="show" src="/images/plus.png"><span class="toggleText">DivisionI</span>    
</h2>
<div class="show2 myclass">
my code to show....
</div>

Upvotes: 1

elclanrs
elclanrs

Reputation: 94131

You can pass jQuery objects into functions:

var toggleDiv = function($el){
    $el.slideDown();
    //blablabla
};

toggleDiv($('#el'));

Upvotes: 0

Related Questions