Reputation: 43
I am trying to achieve a filter that hides other divs by their class name. So far I have the following code, which unfortunately doesn't work. Please help me out, THX!!!
<button id="toggle">Toggle</button>
<div class="text to-filter">Lorem ipsum dolor sit amet.</div>
<div class="text not-to-filter">Lorem ipsum dolor sit amet.</div>
<script>
var button = document.getElementById('toggle'),
text = Array.document.getElementsByClassName("text");
button.onclick = function() {
var isHidden = texts.style.display == 'none';
text.forEach(function(){
style.display = isHidden ? 'block' : 'none';
});
};
</script>
Upvotes: 1
Views: 150
Reputation: 1106
Here is a javascript version.
Add an 'onclick=toggleDiv()' attribute to the button and then,
function toggleDiv() {
var text = document.getElementsByClassName("text");
for (var i = 0; i < text.length; i++) {
var status = text[i].style.display;
text[i].style.display = (status=="" || status=="block") ? "none":"block";
};
}
On click of the button, all 'text' class div will toggle on or off.
Upvotes: 1
Reputation: 8793
The following code will hide any elements that have the class .to-filter
when the user clicks on #toggle
the first time. When they click on it again it will show the elements again.
$('#toggle').on('click', function() {
$('.to-filter').toggle();
});
Upvotes: 0