how to select same class using jquery

Question

I have a list tag, if sale has active class it should display sale_dim div else rent_dim div should be visible

<ul class="saleFlagSelector">
 <li><a href="/ajax-search-forms?sf=true" class="sale ">For sale</a></li>
 <li><a href="/ajax-search-forms?sf=false" class="rent active ">For rent</a></li>
</ul>

<div id="sale_dim">...</div>
<div id="rent_dim">...</div>

Here is jquery function

$(function() {
    $('#sale_dim').show(); 
    $('#rent_dim').hide();
$(ul.saleFlagSelector li a).click(function(){
    if($('.sale').hasClass('active')){
           $('#sale_dim').show(); 
           $('#rent_dim').hide(); 
        } else {
            $('#sale_dim').hide(); 
            $('#rent_dim').show();
        }
    });
});

can I know where am I wrong?

in `f($('.sale').hasClass('active'){` your missing a `)`, should be `f($('.sale').hasClass('active')){` — Carsten Løvbo Andersen, Sep 28 '17 at 07:33
tip: when you don't know why its not working try to look in the web dev tools of the browser or the console.. If there is problem with the code like TYPO it will be displayed as an error in there. — Shadow Fiend, Sep 28 '17 at 07:37
And dont forget to check [this](https://stackoverflow.com/questions/3528509/document-readyfunction-vs-function) — Durga, Sep 28 '17 at 07:40

score 2 · Answer 1 · answered Sep 28 '17 at 07:41

You can use it like this. You can call this function whenever you change active class over sale or rent anchor tag. Also, if you are adding the active class dynamically, use jquery .on function to toggle the div display.

function hideSaleAndRentDim(){

    if($('.sale').hasClass('active'))
      {
           $('#sale_dim').show(); 
           $('#rent_dim').hide(); 
        } else if($('.rent').hasClass('active'))
    {
            $('#sale_dim').hide(); 
            $('#rent_dim').show();
        };

}
$(document).ready(function(){
hideSaleAndRentDim();
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="saleFlagSelector">
     <li><a href="/ajax-search-forms?sf=true" class="sale ">For sale</a></li>
     <li><a href="/ajax-search-forms?sf=false" class="rent active">For rent</a></li>
     </ul>

<div id="sale_dim">Sale Dim</div>
<div id="rent_dim">Rent Dim</div>

how to select same class using jquery

1 Answers1