Javascript toggle using div id

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?

if you're going to remove the class tag, then you'd have to modify the script (since it works on the 'class' tag and not on the id). — Taher
– Taher, Commented Sep 5, 2012 at 11:54
Show us the HTML with ID-s I'm sure there is some misunderstandings about it. — vinczemarton
– vinczemarton, Commented Sep 5, 2012 at 11:58
You could bypass the id and check the next class element: $('a').click(function () { if($(this).nextUntil('a').hasClass("sri"){ ... for example — Alex Ball
– Alex Ball, Commented Sep 5, 2012 at 12:05

gabitzish · Accepted Answer · 2012-09-05 11:54:47Z

2

Make sure you don't repeat the IDs assigned to elements.

Here are some specs of XHTML 1.0 :

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID. In order to ensure that XHTML 1.0 documents are well-structured XML documents, XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers on the elements listed above. See the HTML Compatibility Guidelines for information on ensuring such anchors are backward compatible when serving XHTML documents as media type text/html.

answered Sep 5, 2012 at 11:54

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jens · Accepted Answer · 2012-09-05 12:13:38Z

0

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.

edited Sep 5, 2012 at 12:13

answered Sep 5, 2012 at 11:55

Jens

2,0751 gold badge14 silver badges30 bronze badges

5 Comments

supersaiyan Over a year ago

but requirement is only one id

Jens Over a year ago

I don't see that requirement. But as mentioned by others, using the same ID twice (or more) results in invalid xml.

user1178070 Over a year ago

thanks for your reply jens...iam trying with unique id itself.. but functionality changed.... if i click on text2 ..text1 contents should be hidden and only text2 contents should be shown.. how to do that?it should work exactly like the demo what i have shown with unique id...

Jens Over a year ago

Then you will need a class or a complete list of IDs. But classes are made for this. I edit my answer...

user1178070 Over a year ago

hi jens but one more problem now...if we click on text2/text1 for the second time it is hiding... but it should not happen, that is if i click on text2 , text1 should be hidden and if i click on text2 again result should be same it should not hide text2 contents..

Collectives™ on Stack Overflow

Javascript toggle using div id

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related