July 7, 2010
how to combine these 2 jquery code into one
Question by Jitendra Vyas
Should work same as it’s working independently.
This
(function($) {
$(document).ready(function(){
$('#number1').hide();
$('.button1').click(function(){
$('.table1').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
and this
(function($) {
$(document).ready(function(){
$('#number2').hide();
$('.button2').click(function(){
$('.table2').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
both will be used on same page.
Thanks
Edit: Added after @Felix comment
@Felix – Do you mean like this?
(function($) {
$(document).ready(function(){
$('#number2, #number1').hide();
$('.button2').click(function(){
$('.table2').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
$('.button1').click(function(){
$('.table1').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
})(jQuery);
Answer by Starx
A sample HTML
<button id="button1" class="btn" div="table1">Table 1</button>
<button id="button2" class="btn" div="table2">Table 2</button>
<div class="myDiv" id="div1"><table><tr><td>Table1</td></tr></table></div>
<div class="myDiv" id="div2"><table><tr><td>Table2</td></tr></table></div>
CSS
.myDiv { display:none; }
Jquery
$(document).ready(function(){
$('.btn').click(function(){
//identify same class to all your div for example in this case I will define all tables as myDiv
// doing this will not fix the effect to just two tables
$(".myDiv").slideUp(); //Hide all divs first
$('#'+$(this).attr("div")).slideToggle(); //show the required
$(this).toggleClass("minus_icon");
return false;
});
});
