CODEWITHSUNDEEP
javascriptjqueryhtml
frontend developer
frontend developer

Reputation: 41

Jquery toggle Click to show one div while hiding others

I created a function for the delete button for the div comment. when the click delete then the delete button will come out and if the click cancel delete button will hide.

But I have a problem when it has two div comment, when in click delete then delete another div comment button also exit.

How to order when click delete delete button will come out but in div comment other not show.

Thanks in advance .

// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $('.comment-body, .option').toggleClass('show');
  });
});
.blog-main .list-comment .comment {
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
}

.blog-main .list-comment .comment img {
  float: left;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  width: 50px;
  margin: .5em;
  transition: all 0.5s ease;
}

img {
  max-width: 100%;
}

.blog-main .list-comment .comment .comment-body {
  font-size: 14px;
  margin-left: 5em;
  transition: all 0.5s ease;
}

.blog-main .list-comment .comment .comment-body .del-i {
  color: #999;
  font-size: 16px;
  margin-top: -.1em;
  margin-left: .5em;
}

.blog-main .list-comment .comment .comment-body .cans {
  display: none;
  margin-left: .5em;
}

.bg-light {
  background-color: #e9eff3 !important;
}

.blog-main .list-comment .comment .comment-body .name small {
  display: block;
  padding-top: .3em;
  color: #999;
}

.blog-main .list-comment .comment .option {
  background-color: #ff0057;
  width: 60px;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease;
  position: absolute;
  top: 0;
  right: -100%;
}

.ds-table {
  display: table;
  width: 100%;
  height: 100%;
}

.ds-cell {
  display: table-cell;
  vertical-align: middle;
}

.blog-main .list-comment .comment .option .del-comment {
  color: #fff;
  font-size: 14px;
}

.blog-main .list-comment .comment .comment-body.show .del-i {
  display: none;
}

.blog-main .list-comment .comment .comment-body.show .cans {
  display: inline-block;
}

.blog-main .list-comment .comment .option.show {
  right: 0;
}

.blog-main .list-comment .comment .comment-body.show {
  padding-right: 5em;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="blog-main">
  <div class="list-comment">

    <!-- START LIST COMMENT -->
    <div class="comment">
      <img class="ava" src="img/user.png" alt="user">
      <div class="comment-body">
        <h6 class="name">Imam Khanafi
          <i class="material-icons del-i">delete</i>
          <span class="badge bg-light cans">Cancel</span>
          <small>[email protected]</small>
        </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
        in faucibus.
      </div>
      <div class="option">
        <div class="ds-table">
          <div class="ds-cell">
            <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
          </div>
        </div>
      </div>
    </div>
    <!-- END -->
    <!-- START LIST COMMENT -->
    <div class="comment">
      <img class="ava" src="img/user.png" alt="user">
      <div class="comment-body">
        <h6 class="name">Admin
          <i class="material-icons del-i">delete</i>
          <span class="badge bg-light cans">Cancel</span>
          <br>
          <span class="badge bg-yellow">Admin</span>
        </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
        in faucibus.
      </div>
      <div class="option">
        <div class="ds-table">
          <div class="ds-cell">
            <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
          </div>
        </div>
      </div>
    </div>
    <!-- END -->
  </div>
</div>

Upvotes: 0

Views: 85

Answers (4)

Optimizer
Optimizer

Reputation: 727

$(this).closest('.comment').children('.comment-body, .option').toggleClass('show'); will make it work.

// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.comment').children('.comment-body, .option').toggleClass('show');
  });
});
.blog-main .list-comment .comment {
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
}

.blog-main .list-comment .comment img {
  float: left;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  width: 50px;
  margin: .5em;
  transition: all 0.5s ease;
}

img {
  max-width: 100%;
}

.blog-main .list-comment .comment .comment-body {
  font-size: 14px;
  margin-left: 5em;
  transition: all 0.5s ease;
}

.blog-main .list-comment .comment .comment-body .del-i {
  color: #999;
  font-size: 16px;
  margin-top: -.1em;
  margin-left: .5em;
}

.blog-main .list-comment .comment .comment-body .cans {
  display: none;
  margin-left: .5em;
}

.bg-light {
  background-color: #e9eff3 !important;
}

.blog-main .list-comment .comment .comment-body .name small {
  display: block;
  padding-top: .3em;
  color: #999;
}

.blog-main .list-comment .comment .option {
  background-color: #ff0057;
  width: 60px;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease;
  position: absolute;
  top: 0;
  right: -100%;
}

.ds-table {
  display: table;
  width: 100%;
  height: 100%;
}

.ds-cell {
  display: table-cell;
  vertical-align: middle;
}

.blog-main .list-comment .comment .option .del-comment {
  color: #fff;
  font-size: 14px;
}
.blog-main .list-comment .comment .comment-body.show .del-i {
    display: none;
}
.blog-main .list-comment .comment .comment-body.show .cans {
    display: inline-block;
}
.blog-main .list-comment .comment .option.show {
    right: 0;
}
.blog-main .list-comment .comment .comment-body.show {
    padding-right: 5em;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="blog-main">
<div class="list-comment">

  <!-- START LIST COMMENT -->
  <div class="comment">
    <img class="ava" src="img/user.png" alt="user">
    <div class="comment-body">
      <h6 class="name">Imam Khanafi
                    <i class="material-icons del-i">delete</i>
                    <span class="badge bg-light cans">Cancel</span>
                    <small>[email protected]</small>
                  </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
    <div class="option">
      <div class="ds-table">
        <div class="ds-cell">
          <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
        </div>
      </div>
    </div>
  </div>
  <!-- END -->
  <!-- START LIST COMMENT -->
  <div class="comment">
    <img class="ava" src="img/user.png" alt="user">
    <div class="comment-body">
      <h6 class="name">Admin
                    <i class="material-icons del-i">delete</i>
                    <span class="badge bg-light cans">Cancel</span>
                    <br>
                    <span class="badge bg-yellow">Admin</span>
                  </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
    <div class="option">
      <div class="ds-table">
        <div class="ds-cell">
          <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
        </div>
      </div>
    </div>
  </div>
  <!-- END -->
</div>
</div>

Upvotes: 0

Nawaz Ghori
Nawaz Ghori

Reputation: 591

// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    //$('.comment-body, .option').toggleClass('show');
    $(this).parent().parent().toggleClass('show');
    //  $(this).parent().parent().siblings('.option').toggleClass('show');
    $(this).parent().parent().next('.option').toggleClass('show');
  });
  $('.del-comment').on('click', function(e) {
    e.preventDefault();
    //$(this).closest('.comment').remove();  
    $(this).closest('.comment').hide();
  });
});
.blog-main .list-comment .comment {
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
}

.blog-main .list-comment .comment img {
  float: left;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  width: 50px;
  margin: .5em;
  transition: all 0.5s ease;
}

img {
  max-width: 100%;
}

.blog-main .list-comment .comment .comment-body {
  font-size: 14px;
  margin-left: 5em;
  transition: all 0.5s ease;
}

.blog-main .list-comment .comment .comment-body .del-i {
  color: #999;
  font-size: 16px;
  margin-top: -.1em;
  margin-left: .5em;
}

.blog-main .list-comment .comment .comment-body .cans {
  display: none;
  margin-left: .5em;
}

.bg-light {
  background-color: #e9eff3 !important;
}

.blog-main .list-comment .comment .comment-body .name small {
  display: block;
  padding-top: .3em;
  color: #999;
}

.blog-main .list-comment .comment .option {
  background-color: #ff0057;
  width: 60px;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease;
  position: absolute;
  top: 0;
  right: -100%;
}

.ds-table {
  display: table;
  width: 100%;
  height: 100%;
}

.ds-cell {
  display: table-cell;
  vertical-align: middle;
}

.blog-main .list-comment .comment .option .del-comment {
  color: #fff;
  font-size: 14px;
}

.blog-main .list-comment .comment .comment-body.show .del-i {
  display: none;
}

.blog-main .list-comment .comment .comment-body.show .cans {
  display: inline-block;
}

.blog-main .list-comment .comment .option.show {
  right: 0;
}

.blog-main .list-comment .comment .comment-body.show {
  padding-right: 5em;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="blog-main">
  <div class="list-comment">

    <!-- START LIST COMMENT -->
    <div class="comment">
      <img class="ava" src="img/user.png" alt="user">
      <div class="comment-body">
        <h6 class="name">Imam Khanafi
          <i class="material-icons del-i">delete</i>
          <span class="badge bg-light cans">Cancel</span>
          <small>[email protected]</small>
        </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
        in faucibus.
      </div>
      <div class="option">
        <div class="ds-table">
          <div class="ds-cell">
            <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
          </div>
        </div>
      </div>
    </div>
    <!-- END -->
    <!-- START LIST COMMENT -->
    <div class="comment">
      <img class="ava" src="img/user.png" alt="user">
      <div class="comment-body">
        <h6 class="name">Admin
          <i class="material-icons del-i">delete</i>
          <span class="badge bg-light cans">Cancel</span>
          <br>
          <span class="badge bg-yellow">Admin</span>
        </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
        in faucibus.
      </div>
      <div class="option">
        <div class="ds-table">
          <div class="ds-cell">
            <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
          </div>
        </div>
      </div>
    </div>
    <!-- END -->
  </div>
</div>

Upvotes: 0

Madhavan.V
Madhavan.V

Reputation: 845

This will help you,

.closest('.comment') method will search for the closest element which is having comment class.

// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.comment').find('.comment-body, .option').toggleClass('show');
  });
});
.blog-main .list-comment .comment {
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
}

.blog-main .list-comment .comment img {
  float: left;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  width: 50px;
  margin: .5em;
  transition: all 0.5s ease;
}

img {
  max-width: 100%;
}

.blog-main .list-comment .comment .comment-body {
  font-size: 14px;
  margin-left: 5em;
  transition: all 0.5s ease;
}

.blog-main .list-comment .comment .comment-body .del-i {
  color: #999;
  font-size: 16px;
  margin-top: -.1em;
  margin-left: .5em;
}

.blog-main .list-comment .comment .comment-body .cans {
  display: none;
  margin-left: .5em;
}

.bg-light {
  background-color: #e9eff3 !important;
}

.blog-main .list-comment .comment .comment-body .name small {
  display: block;
  padding-top: .3em;
  color: #999;
}

.blog-main .list-comment .comment .option {
  background-color: #ff0057;
  width: 60px;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease;
  position: absolute;
  top: 0;
  right: -100%;
}

.ds-table {
  display: table;
  width: 100%;
  height: 100%;
}

.ds-cell {
  display: table-cell;
  vertical-align: middle;
}

.blog-main .list-comment .comment .option .del-comment {
  color: #fff;
  font-size: 14px;
}
.blog-main .list-comment .comment .comment-body.show .del-i {
    display: none;
}
.blog-main .list-comment .comment .comment-body.show .cans {
    display: inline-block;
}
.blog-main .list-comment .comment .option.show {
    right: 0;
}
.blog-main .list-comment .comment .comment-body.show {
    padding-right: 5em;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="blog-main">
<div class="list-comment">

  <!-- START LIST COMMENT -->
  <div class="comment">
    <img class="ava" src="img/user.png" alt="user">
    <div class="comment-body">
      <h6 class="name">Imam Khanafi
                    <i class="material-icons del-i">delete</i>
                    <span class="badge bg-light cans">Cancel</span>
                    <small>[email protected]</small>
                  </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
    <div class="option">
      <div class="ds-table">
        <div class="ds-cell">
          <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
        </div>
      </div>
    </div>
  </div>
  <!-- END -->
  <!-- START LIST COMMENT -->
  <div class="comment">
    <img class="ava" src="img/user.png" alt="user">
    <div class="comment-body">
      <h6 class="name">Admin
                    <i class="material-icons del-i">delete</i>
                    <span class="badge bg-light cans">Cancel</span>
                    <br>
                    <span class="badge bg-yellow">Admin</span>
                  </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
    <div class="option">
      <div class="ds-table">
        <div class="ds-cell">
          <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
        </div>
      </div>
    </div>
  </div>
  <!-- END -->
</div>
</div>

Upvotes: 1

asprin
asprin

Reputation: 9823

You have to change

$('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $('.comment-body, .option').toggleClass('show');
});

to 

$('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.comment-body').toggleClass('show');
    $(this).closest('.comment-body').siblings('.option').toggleClass('show');
});

In your original case, when you use $('.comment-body, .option'), it will target all elements with the said classes.

Whereas, when you use $(this), it would find the elements relative to the delete link that was clicked.

Upvotes: 1

Related Questions