Question

Hello people i have problem with jquery toggling script..

<a class="clickMe">Text 1</a>
</br>
 <div class="sri"> - This text will be toggled</div>

<a class="clickMe">Text 2</a>
</br>
<div class="sri"> - This text will be toggled 2</div>


$('a.clickMe').click(function () {
// find first of following DIV siblings
// with class "textBox" and toggle it

$(this).nextAll('div.sri:first').show();
$('div.sri:visible').not($(this).nextAll('div.sri:first')).toggle();
});

above script is working fine please check the demo

but now what i need to use <div id in place of <div class without changing the functionality of the script… i tried many ways but still having some issues…i may dont have to use <a class="clickMe"> is there is way to fix this?

Answer 1

With unique IDs:

<a class="clickMe" toggle="first">Text 1</a>
</br>
 <div id="first" class="text"> - This text will be toggled</div>

<a class="clickMe" toggle="second">Text 2</a>
</br>
<div id="second" class="text"> - This text will be toggled 2</div>


$('a.clickMe').click(function () {
   id = $(this).attr('toggle');
   $('.text').not('#' + id).hide();
   $('#' + id).show();
});

See my Demo or my edited Demo or the third Demo.