Skip to content

Instantly share code, notes, and snippets.

@patrickberkeley
Created July 20, 2009 23:59
Show Gist options
  • Save patrickberkeley/150998 to your computer and use it in GitHub Desktop.
Save patrickberkeley/150998 to your computer and use it in GitHub Desktop.
Simple jQuery show/hide toggle based on class and ID naming convention.
<div class="column">
<h3 class="grey"><span>Solutions</span></h3>
<ul>
<li><a id="section-link-overview" class="toggle" href="#overview">Overview</a></li>
<li><a id="section-link-1" class="toggle" href="#solution-1">Solution 1</a></li>
<li><a id="section-link-2" class="toggle" href="#solution-2">Solution 2</a></li>
<li><a id="section-link-3" class="toggle" href="#solution-3">Solution 3</a></li>
</ul>
</div>
<div id="section-overview" class="section">
<h1>Solutions Overview</h1>
<p>Proin sit amet eros vitae nibh dapibus vestibulum in eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
<h2 id="solution-1">Solution 1 Overview</h2>
<p>Proin sit amet eros vitae nibh dapibus vestibulum in eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.<span class="button"><a id="section-button-1" class="toggle learn" href="#solution-2"><strong>Learn More</strong></a></span></p>
<h2 id="solution-2">Solution 2 Overview</h2>
<p>Proin sit amet eros vitae nibh dapibus vestibulum in eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.<span class="button"><a id="section-button-2" class="toggle learn" href="#solution-2"><strong>Learn More</strong></a></span></p>
</div>
<div id="section-1" class="section">
<h1>Solution 1</h1>
<p>Proin sit amet eros vitae nibh eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
<h2>Solution 1 Feature 1</h2>
<p>Proin sit amet eros vitae nibh eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
<h2>Solution 1 Feature 2</h2>
<p>Proin sit amet eros vitae nibh eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
</div>
<div id="section-2" class="section">
<h1>Solution 2</h1>
<p>Proin sit amet eros vitae nibh eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
<h2>Solution 2 Feature 1</h2>
<p>Proin sit amet eros vitae nibh eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
<h2>Solution 2 Feature 2</h2>
<p>Proin sit amet eros vitae nibh eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
</div>
$(document).ready(function() {
$(".section").hide();
$(".section:first").show();
$(".column .toggle:first").addClass("current");
function markCurrent(clickedLink) {
var clickedID = clickedLink.attr("id");
if (clickedID.match("button")) {
var navID = clickedID.replace(/button/, "link");
} else {
var navID = clickedID;
}
$(".column .toggle").removeClass("current");
$("#"+navID).addClass("current");
};
function toggleSection(clickedLink) {
var sectionID = clickedLink.attr("id").replace(/section-link|section-button/, "section");
$('.section').each(function(){
this.id == sectionID ? $(this).show() : $(this).hide();
});
};
$('.toggle').click(function(){
var clickedLink = $(this);
markCurrent(clickedLink);
toggleSection(clickedLink);
return false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment