Toggle an inactive element's text with jQuery - css

Question

So I am attempting to create a menu element that shows and hides specific divs on a page, while also changing the text of the menu. After a little searching I have it worked out for the most part (although I know the code is a bit kludgey):
$(document).ready(function(){
$('.section[id="option1"]').click(function(){
$(this).text($(this).text() == 'OPTION1' ? 'OPTION1 >>' : 'OPTION1');
$('.blurb').not('.blurb[id="option1"]').hide();
$('.blurb[id="option1"]').slideToggle();
});
$('.section[id="option2"]').click(function(){
$(this).text($(this).text() == 'OPTION2' ? 'OPTION2 >>' : 'OPTION2');
$('.blurb').not('.blurb[id="option2"]').hide();
$('.blurb[id="option2"]').slideToggle();
});
$('.section[id="option3"]').click(function(){
$(this).text($(this).text() == 'OPTION3' ? 'OPTION3 >>' : 'OPTION3');
$('.blurb').not('.blurb[id="option3"]').hide();
$('.blurb[id="option3"]').slideToggle();
});
$('.section[id="option4"]').click(function(){
$(this).text($(this).text() == 'OPTION4' ? 'OPTION4 >>' : 'OPTION4');
$('.blurb').not('.blurb[id="option4"]').hide();
$('.blurb[id="option4"]').slideToggle();
});
$('.section[id="option5"]').click(function(){
$(this).text($(this).text() == 'OPTION5' ? 'OPTION5 >>' : 'OPTION5');
$('.blurb').not('.blurb[id="option5"]').hide();
$('.blurb[id="option5"]').slideToggle();
});
$('.section[id="option6"]').click(function(){
$(this).text($(this).text() == 'OPTION6' ? 'OPTION6 >>' : 'OPTION6');
$('.blurb').not('.blurb[id="option6"]').hide();
$('.blurb[id="option6"]').slideToggle();
});
});
(full code in action can be viewed here)
This code works for the most part, except that if you already have a certain element (class="blurb") shown, when you click on the menu item (class="section") for another element, the menu indicates that the other element is still open. It seems like there must be a simple way to append or remove the desired text on click, but I can't seem to find a good way of doing it. Would it be worth rewriting the code using something like expander.js?
Here is the effected html
<div class="nav">
<div class="section" id="option1">option1</div>
<div class="section" id="option2">option2</div>
<div class="section" id="option3">option3</div>
<div class="section" id="option4">option4</div>
<div class="section" id="option5">option5</div>
<div class="section" id="option6">option6</div>
</div>
<div class="blurb hidden" id="option1">
<h1>content for option1</h1>
</div>
<div class="blurb hidden" id="option2">
<h1>content for option2</h1>
</div>
<div class="blurb hidden" id="option3">
<h1>content for option3</h1>
</div>
<div class="blurb hidden" id="option4">
<h1>content for option4</h1>
</div>
<div class="blurb hidden" id="option5">
<h1>content for option5</h1>
</div>
<div class="blurb hidden" id="option6">
<h1>content for option6</h1>
</div>
I'm still fairly new to jQuery, so any advice/pointers is greatly appreciated.

Answer 1

I solved your problem using a custom class and :after CSS styles: http://jsfiddle.net/mblase75/sDrZ2/3/
First, some CSS to append the arrows and convert to uppercase without modifying the text directly:
.uppercase {
text-transform: uppercase;
}
.uppercase.arrowed:after {
content: " >>";
}
Add in some changes to your HTML to utilize data- attributes, remove duplicate IDs and add an arrowed class which the JS toggles:
<div class="nav">
<div class="section arrowed" data-blurb="option1">option1</div>
<div class="section arrowed" data-blurb="option2">option2</div>
<div class="section arrowed" data-blurb="option3">option3</div>
<div class="section arrowed" data-blurb="option4">option4</div>
<div class="section arrowed" data-blurb="option5">option5</div>
<div class="section arrowed" data-blurb="option6">option6</div>
</div>
And finally, a rewrite to optimize your JavaScript a lot:
$('.section').click(function () {
$(this).addClass('uppercase').toggleClass('arrowed')
.siblings('.section').removeClass('arrowed');
$('#'+$(this).data('blurb')).slideToggle()
.siblings('.blurb').hide();
});
Note that the arrowed class is toggled, so it needs to be added initially so that it's toggled off on the first click.