CODEWITHSUNDEEP
jquery
roi
roi

Reputation: 73

jquery - show and hide elements with effect

I have multiple buttons. each one reveal different div element.

The problem is that it also should hide the previous div that was already revealed/show. not it just shoe more and more div without hide the previous divs...

The reveal and hide should be with jquery effect

JQUERY

$(document).on("click", ".obj_res_btn", function(e){
    
    $(".obj_res_box").addClass("hide_list_item");
    
    var boxID = $(this).data("boxid");
    
    $("#" + boxID).toggle('slow', function() {
            $("#" + boxID).toggleClass("hide_list_item", "show_list_item");
    });         

    
    e.preventDefault();
    
});

HTML

<a href="#" class="list-down-btn obj_res_btn" data-boxid="1">SHOW DIV</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="2">SHOW DIV</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="3">SHOW DIV</a>


<div id="1" class="obj_res_box hide_list_item">...</div>
<div id="2" class="obj_res_box hide_list_item">...</div>
<div id="3" class="obj_res_box hide_list_item">...</div>

CSS

.hide_list_item {display: none;}
.show_list_item {display: block;}

Upvotes: 0

Views: 57

Answers (1)

Flash Thunder
Flash Thunder

Reputation: 12045

$(document).on("click", ".obj_res_btn", function(e) {
  //hide all shown and set class to hide_list_item
  $(".obj_res_box:visible").slideToggle(function(){$(this).addClass('hide_list_item').removeClass('show_list_item')});
  var boxID = $(this).data("boxid");
  //show if not shown already all shown and set class to hide_list_item
  $("#" + boxID).not(':visible').slideToggle("slow",function(){$(this).addClass('show_list_item').removeClass('hide_list_item')});
});
.obj_res_box {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="1">SHOW DIV 1</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="2">SHOW DIV 2</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="3">SHOW DIV 3</a>


<div id="1" class="obj_res_box hide_list_item">id1</div>
<div id="2" class="obj_res_box hide_list_item">id2</div>
<div id="3" class="obj_res_box hide_list_item">id3</div>

Upvotes: 1

Related Questions