CODEWITHSUNDEEP
javascriptjqueryhtmlcss
chantisnake
chantisnake

Reputation: 94

a robust way to toggle item display in Jquery

I want to toggle whether to display an item I should do the following:

$(item).css("display", "none")
$(item).css("display", "block")

But this method is not robust enough, given that the item might be "display: flex" or "display: table".

I think in react, I can just delete that element and re-render it when I need to, but is there any simple way to do that using jQuery besides directly modify the html to delete that element?

Thanks.

Upvotes: 0

Views: 61

Answers (4)

somanalytics
somanalytics

Reputation: 65

You can do a 

$(item).css("display", "none")

and assign the flex or table value of the display property to any custom attribute, e.g. $(item).attr("disp_prop","flex") and on returning back to display you can do a simple.

$(item).css("display", $(item).attr("disp_prop"))

Upvotes: 0

Hovhannes Bantikyan
Hovhannes Bantikyan

Reputation: 371

Why not just use jQuery's show/hide functions? 

$(item).hide();
$(item).show();

hide function is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. (from jQuery documentation)

$('#btnToggle').click(function(){
  if($('#item').is(':visible')) 
  {
    $('#item').hide();
  }
  else 
  {
    $('#item').show();
  }
  
  $('#log').html("Current display state: " + $('#item').css('display'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnToggle">toggle</button>

<div id="item" style="display: flex;">
  flex div
</div>

<div id="log">
</div>

Upvotes: 0

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23768

you should use toggleClass() in case you are working with flex then it would be a better approach to keep the flex properties in a separate class and add/remove or in easy words toggle the flex class if you want to hide or show that container with defaults set to display:none in a separate class, in this way either the container is flex or table it works either ways see the example below

$(".show").on('click', function() {
  if ($(this).siblings('.my-item').css('display') == 'flex') {
    $(this).siblings('.my-item').toggleClass('myflex');
  } else {
    $(this).siblings('.my-item').toggleClass('myTable');
  }


})
.my-item {
  display: none;
}

.myflex {
  display: flex;
  background-color: #f8f8f8;
}

.myTable {
  display: block;
  background-color: #d8d8d8;
}

.container {
  margin-top: 10px;
  border: 5px dashed #c8c8c8;
}

.show {
  padding: 10px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="show">TOGLLE THIS ITEM</a>
  <div class="my-item myflex">1
  </div>
</div>
<div class="container">
  <a class="show">TOGLLE THIS ITEM</a>
  <div class="my-item myflex">2
  </div>
</div>
<div class="container">
  <a class="show">TOGLLE THIS ITEM</a>
  <div class="my-item myTable">TABLE DISPLAY
  </div>
</div>
<div class="container">
  <a class="show">TOGLLE THIS ITEM</a>
  <div class="my-item myflex">3
  </div>
</div>
<div class="container">
  <a class="show">TOGLLE THIS ITEM</a>
  <div class="my-item myflex">4
  </div>
</div>
<div class="container">
  <a class="show">TOGLLE THIS ITEM</a>
  <div class="my-item myflex">5
  </div>
</div>

Upvotes: 1

Onur Kucukkece
Onur Kucukkece

Reputation: 1768

You could also add a custom css class and switch them using below. This would also give a bit more control over styling.

$(item).addClass('display-none');
$(item).removeClass('display-none');
$(item).removeClass('display-none display-flex'); // For removing multiple classes

and for example the css properties would be like

.display-none{
    display: none !important;
}

Upvotes: 1

Related Questions