HTML/CSS show/hide multiple elements?

Question

I'm looking for an HTML/CSS solution to this challenge: I have multiple elements with the same class or same id, and I want to show/hide them all at the same time, using a button or toggle switch. So I then have a click event, when I click that class or ID representing all those elements, they all hide. When I click again, they must show again.

I would appreciate

Thanks

there is no such thing as a click event in css, and in html the closest thing is an anchor. i believe you would need javascript for this. — xec, Mar 02 '12 at 13:32
Please don't create multiple elements on a page with the same id. — Andrew, Mar 02 '12 at 13:50

score 5 · Accepted Answer · answered Mar 02 '12 at 13:37

HTML and CSS are used to describe a static representation of content - there is no way dynamically hide/show content using HTML/CSS. You would need to use Javascript to do this. Code example (very simplistic and unelegant example):

<div id="somediv">Hide This</div>
<input type="button" onclick="hide('somediv')" value="Hide Div"/>
<script type="text/javascript">
     function hide(div_id) {
           document.getElementById(div_id).style.display = "none";
     }
</script>

A nicer solution would be to use jQuery but I think for your case you should first learn the basics of Javascript and HTML/CSS before moving onto jQuery.

thanks you, this really looks like a workable solution, will try it out. — DextrousDave, Mar 02 '12 at 16:26

score 3 · Answer 2 · answered Mar 02 '12 at 13:58

Do not use same ID for HTML elements! Use element class attribute. jQuery is nice thing, but is overkill for such thing :)

<div class="hide1">One</div>
<div class="hide2">Two</div>

<a href="#" onclick="ToggleVisibility('hide1'); return false;">One</a>
<a href="#" onclick="ToggleVisibility('hide2'); return false;">Two</a>
<a href="#" onclick="ToggleVisibility('nosuchclass'); return false;">No hide</a>

And simple JS code:

function ToggleVisibility(divClass)
{
    var els = document.getElementsByClassName(divClass);
    for(var i = 0; i < els.length; i++)
    {
        els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
    }
}

According to W3Schools, visibility is standart thing for all major browsers http://www.w3schools.com/jsref/prop_style_visibility.asp

Thank you for your answer. My brain will chew on that. Appreciated — DextrousDave, Mar 02 '12 at 16:21

score 2 · Answer 3 · answered Aug 16 '13 at 02:55

You can do it with just CSS. See this simple example http://jsfiddle.net/rHSmV/ (Code Pasted Below).

See here http://dev.opera.com/articles/view/css3-show-and-hide/

and here http://cssdeck.com/labs/css-only-showhide

for more in depth examples

<html>
<head> 
<style type='text/css'>
/* Use a checkbox to workaround showing and hiding */
 input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
label {
    cursor: pointer;
}
/* Shown */
 div.showhide {
    display: inline;
}
/* Hidden */
 input[type=checkbox]:checked ~ div.showhide {
    display: none;
}
</style>
</head>
<body>
<label for="showHide">Show/Hide</label>
<input type="checkbox" id="showHide">
<div class="showhide">
    <p>Show and hide me without JavaScript!</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="showhide">
    <p>Show and hide me too without JavaScript!</p>
</div>

</body>

</html>

score 2 · Answer 4 · answered Aug 16 '13 at 04:54

You can use jquery...

$("id of button").click(function(e) {
 if($("class of elements").css("display") != "none") {
  $("class of elements").hide();
  $("class of elements").css("display","none");
 } else {
  $("class of elements").show();
  $("class of elements").css("display","block");
 }
});

Anton Kazanov · Answer 5 · 2012-03-02T13:44:22.213

1

There is no CSS solution for your task. Look for JQuery function .toggle().

$('.button').click(function(){
   $('.some_class').toggle();
});

edited Mar 02 '12 at 13:44

answered Mar 02 '12 at 13:35

Anton Kazanov

41
4

HeavenCore · Answer 6 · 2012-03-02T13:45:21.417

1

In Jquery, you could simply call:

$('.ToggleMe).toggle();

where .ToggleMe is the class of your element.

To toggle by ID:

$("#ToggleMe").toggle();

And to toggle my name:

$('div[name=ToggleMe]')

edited Mar 02 '12 at 13:45

answered Mar 02 '12 at 13:37

HeavenCore

7,533
6
47
62

I was being generic, you can pass ID's & names to the $ constructor, I’ve clarified my answer though just in case :) – HeavenCore Mar 02 '12 at 13:41

HTML/CSS show/hide multiple elements?

6 Answers6

Linked