手风琴导航标题的切换图标

Question

Given the following navigation, I need to be able to toggle the "HEADER"'s so that when one is open, the + becomes a - , but when you click either the same header again or another, it becomes a + again. It is currently staying as a - when clicking it again. The main navigation should function the same as the sub-navigation, except that instead of an arrow, it is changing the + and - as stated above.

HTML

    <div class="inner">
  <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
  <div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
    <div class="column">
      <ul class="list-unstyled">

        <li class="list-header mobile"><a href="#" class="link">link</a></li>
        <li class="list-header desktop"><a href="#">head</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
    </div>
    <div class="column">
      <ul class="list-unstyled">
        <li class="list-header desktop"><a href="#">Link</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
      </ul>
    </div>
  </div>
</div>

<div class="inner">
  <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
  <div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
    <div class="column">
      <ul class="list-unstyled">

        <li class="list-header mobile"><a href="#" class="link">link</a></li>
        <li class="list-header desktop"><a href="#">head</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
    </div>
    <div class="column">
      <ul class="list-unstyled">
        <li class="list-header desktop"><a href="#">Link</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
      </ul>
    </div>
  </div>
</div>

jQuery

$('.list-header.major').next('div').toggle();
    $('.list-header.major').click(function(){
    $('.list-header.major').next('div').slideUp();
      $(this).next('div').toggle();
      $('.list-header').removeClass('active');
      $(this).toggleClass('active');
      return false;
    });

$('.mobile').next('ul').toggle();
$('.mobile').click(function() {
  $('.mobile').next('ul').slideUp();
  $(this).next('ul').toggle();
  $('.mobile button').removeClass('active');
  if ($(this).next('ul').is(':visible')) {
      $(this).find('button').addClass('active');
  }
  return false;
});

CSS

 button.list-header.major {
  &:before,
  &:after {
    color: $purple;
    font-family: 'Material Icons';
    font-size: 20px;
    position: absolute;
    right: 20px;
  }

  &:before {
    content: "\E145"; <--THIS IS A PLUS SIGN
  }

  &:after {
    content: "\E15B"; <--THIS IS A MINUS SIGN
  }
}
.sub-header:after{
      content: " >";
      font-family: 'Material Icons';
      display: inline-block;
      transform: rotate(0);
      font-size: 26px;
      color: $white;
      position: relative;
      top: 8px;
      transition: transform .3s;
    }
    .sub-header.active:after{
      content: " v";
      color: red;
      display: inline-block;
      transform: rotate(8deg);
      font-size: 26px;
      color: $neon-green;
      transition: transform .3s;
    }

JSFIDDLE: https://jsfiddle.net/jdkwcpva/10/

//UPDATE//

I found that the state of the hearers is always set to active, and that the only way to toggle the + or - sign is to toggle the data-state from show to hide , which would be based on the state of the .col-wrapper classes style being either display:none or display: block .

The question is how to look for the display state of the .col-wrapper class and change the data-state based on whether the .list-header has been clicked or not. I've included screen shots of the states from the fiddle( https://jsfiddle.net/2bu35uLn/3/show/ ) below.

This is the closed state

This is the open state Notice that the .col-wrapper class has display:block to show the subnav, but the .list-header class is still set to data-state="hide" , which keeps the header from being toggled.

I'm trying to target the data-state to change to hide if the .col-wrapper class is display:none , but doing something like this:

$(".list-header").on('click', function(){
    if($(this).find(".col-wrapper").css("display", "none")){
      force data-state to be hide
    }
});

Essentially, the issue is that the icons aren't toggling back to the plus sign, if the user clicks on another header. This should force any closed list header to go back to the plus sign.

Answer 1

You are almost done.

I added some more stuff.

$('.list-header.major').next('div').toggle();
    $('.list-header.major').click(function(){
    $('.list-header.major').next('div').slideUp();
      isActive = $(this).hasClass('active');
      $('.list-header.major').removeClass('active');
      if(isActive){
        $(this).removeClass('active') }
      else{
        $(this).addClass('active').next('div').slideDown();
      }
      return false;
    });

$('.mobile').next('ul').toggle();
$('.mobile').click(function() {
  $('.mobile').next('ul').slideUp();
  $(this).next('ul').toggle();
  $('.mobile button').removeClass('active');
  if ($(this).next('ul').is(':visible')) {
      $(this).find('button').addClass('active');
  }
  return false;
});

Look at this: https://jsfiddle.net/2bu35uLn/

Answer 2

My proposal is (see comment: I changed the next line).

This works because toggleclass adds the class if it does not exist or remove if it exists.

 $(function () { $('.list-header.major').next('div').toggle(); $('.list-header.major').click(function(){ $('.list-header.major').next('div').slideUp(); $(this).next('div').toggle(); // I changed the next line $('.list-header.major').not(this).removeClass('active'); $(this).toggleClass('active'); return false; }); $('.mobile').next('ul').toggle(); $('.mobile').click(function() { $('.mobile').next('ul').slideUp(); $(this).next('ul').toggle(); $('.mobile button').removeClass('active'); if ($(this).next('ul').is(':visible')) { $(this).find('button').addClass('active'); } return false; }); }); 

 .list-header.major:after{ content: " +"; color: red; } .list-header.major.active:after{ content: " -"; color: red; } .sub-header:after{ content: " >"; font-family: 'Material Icons'; display: inline-block; transform: rotate(0); font-size: 26px; color: $white; position: relative; top: 8px; transition: transform .3s; } .sub-header.active:after{ content: " v"; color: red; display: inline-block; transform: rotate(8deg); font-size: 26px; color: $neon-green; transition: transform .3s; } 

 <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <div class="inner"> <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"><span>HEADER</span> </button> <div class="col-wrapper collapse in" id="data-nav-0" style="display: block;"> <div class="column"> <ul class="list-unstyled"> <li class="list-header mobile"><a href="#" class="link">link</a></li> <li class="list-header desktop"><a href="#">head</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <ul class="inner collapse" id="data-inner-0-0"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul> </ul> </div> <div class="column"> <ul class="list-unstyled"> <li class="list-header desktop"><a href="#">Link</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <ul class="inner collapse" id="data-inner-0-0"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul> </ul> </ul> </div> </div> </div> <div class="inner"> <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"><span>HEADER</span> </button> <div class="col-wrapper collapse in" id="data-nav-0" style="display: block;"> <div class="column"> <ul class="list-unstyled"> <li class="list-header mobile"><a href="#" class="link">link</a></li> <li class="list-header desktop"><a href="#">head</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <ul class="inner collapse" id="data-inner-0-1"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul> </ul> </div> <div class="column"> <ul class="list-unstyled"> <li class="list-header desktop"><a href="#">Link</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <ul class="inner collapse" id="data-inner-0-2"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul> </ul> </ul> </div> </div> </div> 

Answer 3

What I was able to do is check whether the clicked element was open and then hide all the lists. IF the clicked element was closed to begin with, then I was able to show it. This snippet will work for you:

 $('.list-header.major').click(function(){ var is_open = false; if ($(this).hasClass('active')){ is_open = true; } $('.list-header.major').next('div').slideUp(); $('.list-header.major').removeClass('active'); if (!is_open) { $(this).addClass('active'); $(this).next('div').slideDown(); } }); $('.mobile').click(function() { var is_open = false; if ($(this).children('button').hasClass('active')){ is_open = true; } $('.mobile').next('li').slideUp(); $('.mobile').children('button').removeClass('active'); if(!is_open){ $(this).next('li').slideDown(); $(this).children('button').addClass('active'); } }); 

 .major-content, .mobile-content{ display:none; } .mobile-content{ list-style:none } .list-header.major:after{ content: " +"; color: red; } .list-header.major.active:after{ content: " -"; color: red; } .sub-header:after{ content: " >"; font-family: 'Material Icons'; display: inline-block; transform: rotate(0); font-size: 26px; color: $white; position: relative; top: 8px; transition: transform .3s; } .sub-header.active:after{ content: " v"; color: red; display: inline-block; transform: rotate(8deg); font-size: 26px; color: $neon-green; transition: transform .3s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner"> <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button> <div class="col-wrapper collapse in major-content" id="data-nav-0"> <div class="column"> <ul class="list-unstyled"> <li class="list-header"><a href="#" class="link">link</a></li> <li class="list-header desktop"><a href="#">head</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <li class="mobile-content"> <ul class="inner collapse" id="data-inner-0-0"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul> </li> </ul> </div> <div class="column"> <ul class="list-unstyled"> <li class="list-header desktop"><a href="#">Link</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <li class="mobile-content"> <ul class="inner collapse" id="data-inner-0-0"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul> </li> </ul> </ul> </div> </div> </div> <div class="inner"> <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button> <div class="col-wrapper collapse in major-content" id="data-nav-0"> <div class="column"> <ul class="list-unstyled"> <li class="list-header"><a href="#" class="link">link</a></li> <li class="list-header desktop"><a href="#">head</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <li class="mobile-content"><ul class="inner collapse" id="data-inner-0-0"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul></li> </ul> </div> <div class="column"> <ul class="list-unstyled"> <li class="list-header desktop"><a href="#">Link</a></li> <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide"> <button class="no-style sub-header">This should toggle the ul links</button> </li> <li class="mobile-content"><ul class="inner collapse" id="data-inner-0-0"> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> <li><a href="#" class="link">link</a></li> </ul></li> </ul> </ul> </div> </div> </div> 

On a side note, I wrapped the nested ul elements within li elements to make it valid html.