I have a function that toggles hidden divs and works beautifully at it. unfortunately, the “brand” section just got changed to “the brand.” the code was graciously improved and written dynamically by one of you geniuses and uses the anchor’s content name to select the div to show/hide. unfortunately i need THE (space) BRAND. No bueno!
Ideas? Thank you!
p.s. this function works if you take THE out of the “show_brand” anchor.
HTML:
<div id="nav">
<div id="nav_left">
<a class="home" id="show_brand" title="BRAND">THE BRAND</a><br />
<a class="home" id="show_campaigns" title="CAMPAIGNS">CAMPAIGNS</a><br />
<a href="collection/" title="COLLECTION">COLLECTION</a><br />
<a class="home" id="show_inquiries" title="INQUIRIES">INQUIRIES</a>
</div>
<div id="campaigns">
<a href="campaigns/neo_balletto/" title="NEO BALLETTO">NEO BALLETTO</a><br />
<a href="campaigns/poetic_deco/" title="POETIC DECO">POETIC DECO</a>
</div>
</div>
<div class="current" id="brand">
<p>content</p>
</div>
<div id="inquiries">
<p>content</p>
</div>
Javascript:
$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function() {
showContent($content)
});
}
$('.home').css('text-decoration', 'none');
$(this).css('text-decoration', 'underline');
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
$('.close').click(function() {
$('.current').fadeOut(600);
});
Well just change
var id = $(this).html().toLowerCase();to
var id = $(this).attr("id").replace("show_","").toLowerCase();And your code will work ,no matter what the content of the div is
Check http://jsfiddle.net/3AnZw/1/ for a demo