I'm trying make it so when .toggle-menu is clicked the data-target get a class toggled and other div expand off

user_17445265 0
Viewed 40

I'm trying make it so when .toggle-menu is clicked the data-target get a class toggled and other div expand off.

jQuery(document).ready(function() {

  var windowWidth = jQuery(window).width();
  
  if (windowWidth <= 768)
    jQuery('.panel-collapse').removeClass('in');

  jQuery('.toggle-menu').click(function() {
    // get this data-target
    var target = $(this).data("target");
    $(target).toggleClass('in');
  });
});
.toggle-menu {
  cursor: pointer;
}

.col .collapse.in {
  display: block;
}

.col .collapse {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#foot">Footwere</a></h4>
  </div>
  <div id="foot" class="panel-collapse collapse in">
    <p>
      Show footwere
    </p>
  </div>
</div>

<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#cloth">cloths</a></h4>
  </div>
  <div id="cloth" class="panel-collapse collapse in">
    <p>
      Show cloth
    </p>
  </div>
</div>

Any ideas? Thanks.

css jquery javascript
1 Answers

You can find all the ones that have .in already (where .in are being shown) and remove the class. As you want to toggle the one being clicked, you need to exclude it when removing from the others:

$(".in").not(target).removeClass("in");

Updated fiddle:

jQuery(document).ready(function() {
  var windowWidth = jQuery(window).width();
  if (windowWidth <= 768)
    jQuery('.panel-collapse').removeClass('in');

  jQuery('.toggle-menu').click(function() {
    // get this data-target
    var target = $(this).data("target");
    $(".in").not(target).removeClass("in");
    $(target).toggleClass('in');
  });
});
.toggle-menu {
  cursor: pointer;
}

.col .collapse.in {
  display: block;
}

.col .collapse {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#foot">Footwere</a></h4>
  </div>

  <div id="foot" class="panel-collapse collapse in">
    <p>
      Show footwere
    </p>
  </div>
</div>

<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#cloth">cloths</a></h4>
  </div>
  <div id="cloth" class="panel-collapse collapse in">
    <p>
      Show cloth
    </p>
  </div>
</div>

Edit: with a basic plus/minus that toggles

jQuery(document).ready(function() {
  var windowWidth = jQuery(window).width();
  if (windowWidth <= 768) {
    jQuery('.panel-collapse').removeClass('in');
    $(".plus,.minus").toggle();
  }

  jQuery('.toggle-menu').click(function() {
    // get this data-target
    var target = $(this).data("target");
    $(".in").not(target).removeClass("in");
    $(target).toggleClass('in');
    $(this).closest(".day-header").find(".plus,.minus").toggle();
  });
});
.toggle-menu {
  cursor: pointer;
}

.col .collapse.in {
  display: block;
}

.col .collapse {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="day-header">
    <h4>
      <span class='plus' style='display:none;'>+</span>
      <span class='minus'>-</span>
      <a class="toggle-menu" data-target="#foot">Footware</a>
    </h4>
  </div>

  <div id="foot" class="panel-collapse collapse in">
    <p>
      Show footware
    </p>
  </div>
</div>

<div class="col">
  <div class="day-header">
    <h4>
      <span class='plus' style='display:none;'>+</span>
      <span class='minus'>-</span>
      <a class="toggle-menu" data-target="#cloth">cloths</a>
    </h4>
  </div>
  <div id="cloth" class="panel-collapse collapse in">
    <p>
      Show cloth
    </p>
  </div>
</div>

user_21815140
Related