There are four links on my page that toggle the visibility of different divs. You can see them in action here.
The code for the links is shown below:
<li class="togglelink fadein button" data-block="albums" id="togglealbums">Albums</li>
<li class="togglelink fadein button" data-block="about" id="toggleabout">About Me</li>
<li class="togglelink fadein button" data-block="contact" id="togglecontact">Contact</li>
and
<img src="images/info.png" class="button nav_button fadein toggleinfo" id="info" alt="Show Info Pane" title="Show Info Pane">
The CSS for the fadein class includes:
.fadein {opacity:0.5; transition:opacity 0.5s; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; -ms-transition:opacity 0.5s;}
.fadein:hover {opacity:1.0;}
The jQuery responsible for showing and hiding the target divs is:
$('.togglelink').on('click',function() {
var id = $(this).data('block');
$('#'+id).fadeToggle('slow').siblings('.toggleblock').fadeOut('fast');
});
$('.toggleinfo').click(function() {
$('.info').fadeToggle('slow');
});
My goal is to keep the link that targets an open div at opacity: 1.0. I attempted to achieve this by toggling the active class on click.
$('.togglelink,.toggleinfo').click(function() {
$(this).toggleClass('fadein active');
});
However, there are two issues with this approach: the links do not return to semi-transparent when using the close buttons on the divs, and clicking multiple links can result in multiple fully opaque links.
The code for the close buttons is similar to:
<img src="images/close_pane.png" class="togglelink fadein close_pane button" data-block="albums" alt="Close Album List" title="Close Album List">
If anyone has suggestions on how to resolve these issues, I would greatly appreciate it. Thank you!