javascript – Jquery filter menu switch-ThrowExceptions

Exception or error:

i want the first filter closed if i click on the second. I can’t use id but only class and the filter limit is undefined. i first thought to use .eq(0) .eq(1) etc but it may be not the good solution.

May someone know this problem ?

$(".filter-tab").click(function(){
    if ($(this).find(".filter-pad-checkboxes").css('display') == 'none'){
        $(this).find(".filter-pad-checkboxes").css('display', "block");
        $(this).addClass('selected');
      } else {
        $(this).find(".filter-pad-checkboxes").css('display', "none");
        $(this).removeClass('selected');
      }
});
.filter-tab{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    cursor: pointer;
    height: 38px;
}
.filter-tab.selected{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    background-color: red;
    cursor: pointer;
    border-radius: 100px;
}
.filter-subbar{
    width : 300px;
    margin-left: 30px;
    display: block;
    margin-left: 0px;
}
.filter-pad-checkboxes{
    position: absolute;
    text-align: left;
    display: none;
    border: 1px solid black;
    padding: 16px 54px 24px 27px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="filter-subbar">
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        
 </ol>

Thanks for the solution, it work well, resolved 🙂

How to solve:

When a filter is selected, find the other filters that were not selected, remove the class from them, and hide their children.

You can also reduce your logic by making a CSS Rule based off of the :not(.selected) selector.

var $filterTabs = $(".filter-tab").on('click', function(){
  var $filterTab = $(this);
  
  if ($filterTab.hasClass('selected')) {
    $filterTab.removeClass('selected');
  } else {
    $filterTab.addClass('selected');
    $filterTabs.not(this).removeClass('selected');
  }
});
.filter-tab{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    cursor: pointer;
    height: 38px;
}
.filter-tab:not(.selected) .filter-pad-checkboxes {
  display: none;
}
.filter-tab.selected{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    background-color: red;
    cursor: pointer;
    border-radius: 100px;
}
.filter-subbar{
    width : 300px;
    margin-left: 30px;
    display: block;
    margin-left: 0px;
}
.filter-pad-checkboxes{
    position: absolute;
    text-align: left;
    border: 1px solid black;
    padding: 16px 54px 24px 27px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="filter-subbar">
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        
 </ol>

###

Just key off things with the class. Added a CSS rule instead of using block.

$(".filter-tab").click(function(){
  $(".filter-tab.selected").not(this).removeClass("selected")
  $(this).toggleClass("selected")
});
.filter-tab{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    cursor: pointer;
    height: 38px;
}
.filter-tab.selected{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    background-color: red;
    cursor: pointer;
    border-radius: 100px;
}
.filter-subbar{
    width : 300px;
    margin-left: 30px;
    display: block;
    margin-left: 0px;
}
.filter-pad-checkboxes{
    position: absolute;
    text-align: left;
    display: none;
    border: 1px solid black;
    padding: 16px 54px 24px 27px;
}

.filter-tab.selected .filter-pad-checkboxes {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="filter-subbar">
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        
 </ol>

Leave a Reply

Your email address will not be published. Required fields are marked *