CODEWITHSUNDEEP
javascriptjquerycss
mcl
mcl

Reputation: 119

Finding next occurence of a class

For a reason which escapes me I am not hiding and showing the div following a button click.

When I had my Buttons outside the paragraph - it worked, so I guess I am somehow not finding the following div. I have tried .find(".divNotes").next , but that did not work either.

So I expect I have missed some simple syntax / logic

.article { width: 200px; }
.btnNotes { }
.divNotes { display : none; }

<div class="article">
    <p>Text text Art 1  ... <button type="button" class="btnNotes" >Notes</button></p>
    <div class="divNotes">
        <p>Text text More 1</p>
        <p>Text text</p>
    </div>
</div>

<div class="article">
    <p>Text text Art 2  ... <button type="button" class="btnNotes" >Notes</button></p>

    <div class="divNotes">
        <p>Text text More 2</p>
        <p>Text text</p>
    </div>
</div>

<div class="article">
    <p>Text text Art 3  ...  <button type="button" class="btnNotes" >Notes</button></p>

    <div class="divNotes">
        <p>Text text More 3</p>
        <p>Text text</p>
    </div>
</div>      

$(document).ready(function() {
    $('.btnNotes').click(function(){
        if ($(this).text() === "Notes") {
            alert("Notes= " + $(this).text() + $(this).nextAll("div.divNotes").text());

            $(this).text("Less");
            $(this).nextAll("div.divNotes").toggle();          
        } else {
            alert ("Less= " + $(this).text() + $(this).nextAll("div.divNotes").text());

            $(this).text("Notes");
            $(this).nextAll("div.divNotes").toggle();
        }        
    }); 
});

Upvotes: 1

Views: 78

Answers (5)

Hardik Patel
Hardik Patel

Reputation: 716

If you want to find next all div with particular class and you want to toggle that class than please try follow code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
.article { width: 200px; }
.btnNotes { }
.divNotes { display : none; }
</style>

<div class="main-div">
    <div class="article">
        <p>Text text Art 1  ... <button type="button" class="btnNotes" >Notes</button></p>
        <div class="divNotes">
            <p>Text text More 1</p>
            <p>Text text</p>
        </div>
    </div>

    <div class="article">
        <p>Text text Art 2  ... <button type="button" class="btnNotes" >Notes</button></p>

        <div class="divNotes">
            <p>Text text More 2</p>
            <p>Text text</p>
        </div>
    </div>

    <div class="article">
        <p>Text text Art 3  ...  <button type="button" class="btnNotes" >Notes</button></p>

        <div class="divNotes">
            <p>Text text More 3</p>
            <p>Text text</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.btnNotes').click(function(){
            if ($(this).text() === "Notes") {
                $(this).text("Less");               
            } else {                
                $(this).text("Notes");              
            }
            $(this).parent().parent('div.main-div').find('div.divNotes').toggle();
        }); 
    });
</script>

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

Get the parent div.article from the button click and toggle it's corresponding div.divNotes.

Here is a working example:

$(document).ready(function() {
  $('.btnNotes').click(function() {
    if ($(this).text() === "Notes") {
      $(this).text("Less");
    } else {
      $(this).text("Notes");
    }
    $(this).parents("div.article").find("div.divNotes").toggle();
  });
});
.article {
  width: 200px;
}
.btnNotes {} .divNotes {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="article">
  <p>Text text Art 1 ...
    <button type="button" class="btnNotes">Notes</button>
  </p>
  <div class="divNotes">
    <p>Text text More 1</p>
    <p>Text text</p>
  </div>
</div>

<div class="article">
  <p>Text text Art 2 ...
    <button type="button" class="btnNotes">Notes</button>
  </p>

  <div class="divNotes">
    <p>Text text More 2</p>
    <p>Text text</p>
  </div>
</div>

<div class="article">
  <p>Text text Art 3 ...
    <button type="button" class="btnNotes">Notes</button>
  </p>

  <div class="divNotes">
    <p>Text text More 3</p>
    <p>Text text</p>
  </div>
</div>

Upvotes: 1

Khris Roberts
Khris Roberts

Reputation: 335

I got this working by adding .parent() to your line $(this).parent().nextAll(".divNotes").toggle();

$(document).ready(function() {
    $('.btnNotes').click(function(){
        if ($(this).text() === "Notes") {
            alert("Notes= " + $(this).text() + $(this).nextAll(".divNotes").text());

            $(this).text("Less");
            $(this).parent().nextAll(".divNotes").toggle();          
        } else {
            alert ("Less= " + $(this).text() + $(this).nextAll("div.divNotes").text());

            $(this).text("Notes");
            $(this).parent().nextAll(".divNotes").toggle();
        }

    }); 
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337626

The issue is because the button is not a sibling of .divNotes, hence nextAll() or next() will not find anything. You could fix this by using closest() to get the parent .article and usnig find() to get the required div, like this:

$('.btnNotes').click(function() {
    $(this).text($(this).text() === "Notes" ? 'Less' : "Notes")
        .closest('.article').find('.divNotes').toggle();
});

Working example

Note the use of a ternary expression to simplify the logic over the expanded if statement.

Upvotes: 1

Amar Singh
Amar Singh

Reputation: 5622

nextAll() traverse the siblings which are next to it. But in p tag , button is the only sibling, it cannot find divNotes So you need to use .parent() to actually use .nextAll() 

  $(this).parent().nextAll("div.divNotes").toggle();

Upvotes: 1

Related Questions