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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Any ideas? Thanks.

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Edit: with a basic plus/minus that toggles

Show code snippet

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>