CODEWITHSUNDEEP
jquery
monty01
monty01

Reputation: 25

Show a div by find function using jQuery

By default the second div is hided. But if I click on the first class li element I would like to get that class name, and find that class name in the second div and show it.

Let assume that I click on How, then it should show second class HowI class name div. But after that I could click on What li element in the first div, the it should hide the second class HowI class, and show whater div.

At the jQuery code, I had made an alert and it give me the appropriate class name when I click on the first div class li element, but it does not show the appropriate second div elements, so I assume that the following code have some problem $(".second").find(firstClass).show();. I have no idea what could be the problem

$(".main div:not([class=first])").hide();

$(document).on("click", "li", function() {
  var firstClass = $(this).children("a").attr('class');
  $(".second").find(firstClass).show();
});
* {
  margin: 0px;
  padding: 0px;
}
ul {
  list-style: none;
}
.main {
  display: flex;
}
.first {
  width: 40vw;
}
.second {
  width: 20vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="first">
    <ul>
      <li><a href="#" class="HowI">How</a></li>
      <li><a href="#" class="Whater">What</a></li>
    </ul>
  </div>
  <div class="second" >
    <div class="HowI">
      <ul>
        <li><a href="#" value="3">1. s</a></li>
        <li><a href="#" value="1">2. s</a></li>
        <li><a href="#" value="2">3. s</a></li>
      </ul>
    </div>
    <div class="Whater">
      <ul>
        <li><a href="#" value="2">1. s</a></li>
      </ul>
    </div>
    
  </div>
</div>

Upvotes: 1

Views: 32

Answers (2)

charlietfl
charlietfl

Reputation: 171698

Two issues.

  1. Your initial hide() is also hiding the parent (class=second) of the elements you want to show. You can't show something if it's parent is hidden
  2. You are missing the dot prefix for class selector when you do find(firstClass)

Following only hides the children of second and adds the prefix

$(".second").children().hide();

$(document).on("click", "li", function() {
  var firstClass = $(this).children("a").attr('class');
  $(".second").find('.' + firstClass).show();
                  // ^^ missing prefix for class selector
});
* {
  margin: 0px;
  padding: 0px;
}
ul {
  list-style: none;
}
.main {
  display: flex;
}
.first {
  width: 40vw;
}
.second {
  width: 20vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="first">
    <ul>
      <li><a href="#" class="HowI">How</a></li>
      <li><a href="#" class="Whater">What</a></li>
    </ul>
  </div>
  <div class="second" >
    <div class="HowI">
      <ul>
        <li><a href="#" value="3">1. s</a></li>
        <li><a href="#" value="1">2. s</a></li>
        <li><a href="#" value="2">3. s</a></li>
      </ul>
    </div>
    <div class="Whater">
      <ul>
        <li><a href="#" value="2">1. s</a></li>
      </ul>
    </div>
    
  </div>
</div>

Upvotes: 1

Thallius
Thallius

Reputation: 2619

You have more than one problem here. First of all, your click gets triggered if you click on any li element. So you first have to find out which li was clicked. This can be done by checking the parents but I would prefer to give the clickable li elements an id. So its much easier to work with

<div class="first">
<ul>
  <li><a id = "How" href="#" class="HowI">How</a></li>
  <li><a id = "What" href="#" class="Whater">What</a></li>
</ul>

Now you can simply check which li was clicked by

$(document).on("click", "li", function(element) 
{
   if($(this).attr('id') === 'How') // How is clicked
   {
      // and now you can access the second how by its class 
      $('.second > .HowI).show();
   }
});

Of course you can give your second li elements also id's. But be aware that they must be unique over the entire page.

Alternativ you can of course add a click handler on each element to be clicked. Then you do not need to check which element was clicked.

$('#How').on("click", function() 
{
    $('.second > .HowI).show();
});

What is the better solution depends non what you want to do in the click body. If you do separate actions for each clickable element, the second way would be better. If you like to do the same action on the clicked element the first solution will be preferred

Upvotes: 0

Related Questions