Switch multiple content and add text to the switch link

Question

I have about 25 visible / hidden elements () on the page, for example ...

HTML:

<h2><a href="#" class="link1">Headline One</a></h2> <div class="toggle-item-link1">content</div> <h2><a href="#" class="link2">Headline Two</a></h2> <div class="toggle-item-link2">content</div> 

JS:

 $('[class^=toggle-item]').hide(); //toggle content on click $('[class^=link]').click(function() { var $this = $(this); var x = $this.attr("className"); $('.toggle-item-' + x).toggle(); $(this).text($(this).text() == 'open' ? 'close' : 'open'); 

---

So, what happens is that the text H2 (Headline One, Headline Two) is completely replaced by the text "open / close" depending on the switching state. What I want to do is add Open / Close text to the actual header depending on the switching state.

For instance:

Open Header Single / Close Header

Open Header Two / Close Header 2

I just don’t see how to do it. Any help would be great. Thank you

Answer 1

Just to keep things simple, I put Open / Close text in a range and referenced this:

Example: http://jsfiddle.net/8TXDM/1/

HTML

 <h2><a href="#" class="link1"><span>Open</span> Headline One</a></h2> <div class="toggle-item-link1">content</div> <h2><a href="#" class="link2"><span>Open</span> Headline Two</a></h2> <div class="toggle-item-link2">content</div>​ 

JQuery

 $('[class^=toggle-item]').hide(); $('[class^=link]').click(function() { $('.toggle-item-' + this.className).toggle(); $('span',this).text(function(i,txt) { return txt === "Open" ? "Close" : "Open"; }); });​ 

Also, instead of having to select the .toggle-item- from the DOM each time, I will probably just go there.

Example: http://jsfiddle.net/8TXDM/2/

 $('[class^=link]').click(function() { $('span', this).text(function(i, txt) { return txt === "Open" ? "Close" : "Open"; }).end().parent().next().toggle(); }); 

Answer 2

You can add content to an element using $('#id').append() . If you add a class with a class, you can remove it with $('.class #id').remove() .

Use your own selectors as needed :-) You can also set the text in an element using the $('#id').text('my_text) . Or if you need to set it to HTML $('#id').html('my_html') .

Answer 3

Try something like this: http://jsfiddle.net/ZgyAx/

Here is the code for it:

 $('[class^=toggle-item]').hide(); //toggle content on click $('[class^=link]').click(function() { var $toggleItem = $('.toggle-item-' + $(this).attr("class")); var $toggleLink = $(this); $toggleItem.slideToggle(function() { var $stateSpan = $('<span class="state"></span>'); $toggleItem.is(':visible') ? $stateSpan.text('Close ') : $stateSpan.text('Open '); $toggleLink.children('.state').remove().end().prepend($stateSpan); }); }).prepend($('<span class="state">Open </span>')); 

I changed the switch to slideToggle so that the text was opened / hidden smoothly, rather than jumping open and closed. Of course, if you prefer this, you can simply change slideToggle to toggle .

To make text replacement easier, it wraps open / close text in <span> with a class that allows you to quickly grab it. Then, to simplify the task, he checks the switch element for visibility and uses this to determine whether to say “Open” or “Close”. Note that this must be done inside the callback for slideToggle , because the visibility check will not be slideToggle until the animation finishes. Finally, simply delete any existing open / closed text and insert a new one.

Answer 4

If your layout looks like a question, instead of searching by class you can find the element relatively. It would also be easier to wrap the text in another element for easy modification, for example:

 $('h2 + div').hide(); $('h2 a').prepend('<span>Open</span> '); $('h2 a').click(function(e) { var vis = $(this).parent().next().toggle().is(':visible'); $(this).find('span').text(vis ? 'Close' : 'Open'); e.preventDefault(); });​​ 

Here you can try here .