Question

On my page I have four links that show and hide a div each. Take a look here.

The markup for the links is as follows:

<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 is as follows:

.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;}

And the jQuery that shows/hides the target divs is as follows:

$('.togglelink').on('click',function() {
  var id = $(this).data('block');
  $('#'+id).fadeToggle('slow').siblings('.toggleblock').fadeOut('fast');
});

$('.toggleinfo').click(function() {
  $('.info').fadeToggle('slow');
});

What I want to happen is that when the target div is open (albums, about, contact, and info, respectively) the link that targets it stays at opacity: 1.0.

I tried this:

$('.togglelink,.toggleinfo').click(function() {
  $(this).toggleClass('fadein active');
});

Where the active class is:

.active {opacity: 1.0;}

But this had two issues: using the close buttons on the panes themselves won’t cause the links to go back to semi-transparent, and, in the case of the top 3 links, clicking one link and then another will result in two fully opaque links.

The code for the close buttons is like this:

<img src="images/close_pane.png" class="togglelink fadein close_pane button" data-block="albums" alt="Close Album List" title="Close Album List">

How can I fix these issues? Thanks!

Answer 1

$('.togglelink,.toggleinfo').click(function() {
    $(this).siblings('.active').toggleClass('fadein active');
    $(this).toggleClass('fadein active');
});

$('.close_pane').click(function(){
    $('li[data-block="'+ $('this').data('block') +'"]').removeClass('active').addClass('fadein');
});