CODEWITHSUNDEEP
javascriptjqueryhtmlcss
zigzag
zigzag

Reputation: 67

How to: Use JQuery to fetch and update ONLY the following classes under a button living in one of those classes

Working fiddle is here and I'm trying to show/hide parent/child nodes.

Sample structure related to the question (conceptually similar to the fiddle)

    <div class="card LevelOne">
    <button></button>
</div>

<div class="card LevelTwo">
    <button></button>
</div>

<div class="card LevelThree">
    <button></button>
</div>

What I'd like to do is. if I click on a button under class level one, hide level two and there. If I click on a button under class two, only hide three. Kind of like that structural parent/child hide capability. what's the best way to accomplish this?

Upvotes: 1

Views: 40

Answers (1)

gurvinder372
gurvinder372

Reputation: 68423

Try nextAll()

$("button").click(function() {
  $(this).parent().nextAll(".card").toggle()
})

Demo

$("button").click(function() {
  $(this).parent().nextAll(".card").toggle();
})
.card
{
   margin:20px;
   padding:10px;
   border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card LevelOne">
  <button>Button1 For toggle below 2</button>
</div>

<div class="card LevelTwo">
  <button>Button2 For toggle below 1</button>
</div>

<div class="card LevelThree">
  <button>Button3</button>
</div>

Upvotes: 3

Related Questions