Here is the code I currently have with HTML, CSS, and JavaScript. Everything is working correctly except for one small issue that I can't seem to resolve. I am new to JavaScript and believe that JavaScript is necessary to fix this problem. If not, then it might be a CSS issue...
If you click on each div with titles such as "NoS Members," "Registered Members," and "Team Profiles," you will see that the slider background image (small triangle) works and becomes active when clicking any of the three divs. This action reveals another container below, which functions perfectly. However, the problem I encounter is that if you initially click on "NoS Members," then proceed in order to click either the 2nd one - "Registered Members," or the last one - "Team Profiles," and then try going back to click on "Registered Members" or "NoS Members" again, the slider does not work by sliding back to the left. It only seems to work sliding to the right after an initial click has been made.
Check out my jsfiddle here: http://jsfiddle.net/5DTKH/
Code:
HTML
<div id="profile_selection">
<a href="#nos_profiles" class="profile_selection">{Ñا}<br />Members</a>
<a href="#registered_profiles" class="profile_selection">Registered<br />Members</a>
<a href="#team_profiles" class="profile_selection">Team<br />Profiles</a>
<div id="profile_selection_slider"></div>
</div>
<div id="nos_profiles" class="selection">
</div>
<div id="registered_profiles" class="selection">
</div>
<div id="team_profiles" class="selection">
</div>
CSS
#profile_selection { width: 612px; height: 152px; padding: 0; margin: 15px auto; position: relative; }
#profile_selection a {
width: 200px;
height: 105px;
padding: 45px 0 0 0;
margin: 0;
background: #333;
border: 2px solid #444;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
float: left;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
color: #FFF;
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
z-index: 4;
}
(...)
Javascript
$(document).ready(function(){
$('a.profile_selection').click( function(){
var a = $(this);
$('a.profile_selection').removeClass('active');
$(this).addClass('active');
var selection = $( a.attr('href'));
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if( selection.is(':visible')){
selection.slideToggle(400)
}else{selection.slideToggle(400)
};
});
});
I would greatly appreciate any assistance. Also, just mentioning that I am using the jQuery library 1.3.2 - I understand it's outdated, but that's what I have... Thanks to Ashis and Nick for their previous help as well.