In CSS (not javascript), how can I hide the first element with a particular class, but not the other elements? See example below:
<div class="wrap">
<center>
<a href="" class="button">hide this one</a>
</center>
<div> Some other stuff</div>
<center>
<a href="" class="button">don't hide this one</a>
</center>
</div>
How would I hide the first element with the class of button?
One option would be to use the nth-of-type selector:
.button:nth-of-type(1) {
display:none;
}
Note: This selector is supported in IE9+, Chrome, Firefox, Safari and Opera (but not older versions of IE).
Also, it's time to remove the <center> tags. They have been removed as of HTML5.
Replace it with the equivalent CSS:
a.button {
text-align:center;
}
With the :first-of-type CSS selector:
a.button:first-of-type { display: none; }
Beware of browser compatibility (IE < 9 is not supported), and also note that this will only work because all the elements under consideration are siblings; if they were scattered throughout the document tree it would not be possible to do this with pure CSS.
If you want your code to work with older version browser (IE8 etc). use jquery.
http://www.mkyong.com/jquery/jquery-toggle-example-to-display-and-hide-content/
The example:
<html>
<head>
<title>jQuery toggle to display and hide content</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});
});
</script>
<style>
.round-border {
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<section class="round-border">
<h2>jQuery toggle() to hide/show collapse content</h2>
<div>
<button href="#collapse1" class="nav-toggle">Show</button>
</div>
<div id="collapse1" style="display:none">
<p>Bla bla bla bla</p>
</div>
</section>
</body>
</html>
better to add a special class with preprocessor. Because "first-of-type", "nth-of-child" and similars a not working in browsers
