Tim Marshall Tim Marshall - 25 days ago 6
Javascript Question

Store all element which are hidden to hide again later

How can I, using the each function, find all the elements within another, log all the class names of each element;

<div class="Actions">
<div class="Trash"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
<div class="Mark-Read"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></div>
<div class="Flag"><i class="fa fa-flag" aria-hidden="true"></i></div>
<div class="Pin"><i class="fa fa-thumb-tack" aria-hidden="true"></i></div>
</div>

// My progress...
$(this).find('.Actions').children().not(":visible").each(....);


And then at a later point, hide all of those elements?

I simply use
$(this).find('.Actions').children().show();
elsewhere to show all the elements however later on those elements which were initially hidden need to be rehdden.

Answer

I have created a working snippet with what you have expected.

Basically, an attribute has added to the element to have a reference if it was hidden initially.

Then using the same attribute, it has been set hidden when the "Reset" button clicked.

$('.Actions').children().not(':visible').each(function(){
  $(this).attr('data-display', 'none');
});

$('.Actions').children().show();

$('#reset').click(function(){
  $('.Actions').children('[data-display="none"]').hide();
});
.Flag
{
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Actions">
    <div class="Trash"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
    <div class="Mark-Read"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></div>
    <div class="Flag"><i class="fa fa-flag" aria-hidden="true"></i></div>
    <div class="Pin"><i class="fa fa-thumb-tack" aria-hidden="true"></i></div>
</div>
<input id="reset" type="button" value="Reset">

Comments