Utilizing the toggle function in jQuery, I created a mechanism to switch between 4 different blocks of content.
You can view a demonstration of how the functionality operates correctly in Google Chrome here:
If you encounter any issues with the functionality while using Internet Explorer 7, please refer to the following screencast:
To see the feature in action yourself, visit the page at:
A minor formatting discrepancy occurs when clicking on each header (h2) element—while it starts a new line as intended, IE 7 displays it differently.
Below is an example of the HTML code:
<div class="divide-details">
<h2><a href="#" title="view Student Perspective" class="student-perspective">Student Perspective</a> <a href="#" title="view Student Perspective" class="student-perspective"><span>»</span></a></h2>
<div id="student-perspective-details">
<p>Content</p>
<div class="clear-both"></div>
</div>
</div>
... Repeat similar structure for Social Perspective, Taxpayer Perspective, and Business Perspective ...
CSS Styles:
#student-perspective-details,
#social-perspective-details, #business-perspective-details,
#taxpayer-perspective-details { display:none; border-bottom:1px solid #ccc; clear:both; overflow:auto; width:100%; clear:both; }
.divide-details {
float:left;
margin:0 0 5px 0;
padding:5px;
}
... Additional CSS styling rules included for visual enhancements ...
jQuery Toggle Functionality:</p>
<pre><code>$(document).ready(function() {
$('.student-perspective').click(function() {
$("#student-perspective-details").slideToggle(100);
return false;
});
... Repeat this function definition for other perspectives (Social, Taxpayer, Business) and their respective span elements ...
});