As the title says I'm trying to show and hide divs in html. I've found this link Show hide divs on click in HTML and CSS without jQuery and used exactly this http://jsbin.com/Amejum/2/edit?html,css,output
However, instead of Content 1.... I got a little bit more: textfield, dropdown list and a button. Whenever I now click my textfield, dropdown list or button, it hides again.
I'm a complete noob at this so I'm sure this'll be something very easy?
Kind regards,
Sander.
As long as you place your content is inside the <div></div> it should function as expected. See the snippet below:
.collapse {
font-size: 31px;
display: block;
}
.collapse + input {
display: none;
}
.collapse + input + * {
display: none;
}
.collapse+ input:checked + * {
display: block;
}<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox">
<div>
<!------------------------------------------After this-->
<input placeholder="Text" />
<select>
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
<button>Button</button>
</div>
<!-----------------------------------------Before this-->
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>
<!------------------------------------------After this-->
<p>Ut sit ponderum voluptatum, case ignota constituto pri ex, quas vidit ullamcorper cu vim. At mel minimum epicurei, ius no augue graece utroque. Dicam ullamcorper mei ex, ad tota numquam fierent pri. Vim an quod incorrupte, eu duo legimus constituam.
Modus posidonium qui cu, cu lorem audire mea. Nam prima malis accommodare ne, vero euismod vel et.
</p>
<p>
Ea qui maiorum dolores hendrerit, ne tamquam luptatum pro. Liber maiorum detraxit ius ut, aeterno molestie expetendis duo in. Dicant mediocrem suscipiantur ei eos, inermis sapientem at duo. Mutat tempor equidem pro te. Everti prompta accusam vim id, sit
in eius labitur feugiat.
</p>
<p>
Mollis quaestio est ut, ex mutat elaboraret vel. Vis solum placerat te. Tantas laudem vel ne, in cum purto quando vocibus. Ne labores ancillae consequuntur sea. Epicurei constituto adipiscing nec at, has ut solum dicta maiorum.
</p>
<p>
Sea soleat discere ad. Te pri mucius detraxit invenire, pro ipsum liber mandamus ne. Ut tantas definiebas constituam has, ea vis sumo eleifend consequuntur. Et mea viris pertinacia. Ferri illum facete sed ea, quem lucilius qui ei. Pri quaeque fuisset
cu, facer mollis animal eum an.
</p>
<p>
Omnesque noluisse gloriatur vim an, malorum impedit democritum et quo, vim nobis tantas nusquam cu. Per probo persecuti eu, ex habemus disputando duo. Te eos possim facilis. Labitur veritus pro ad. Eius habeo senserit est eu.
</p>
<p>
His debet viderer persecuti ne, cum movet persius feugiat ei. Harum possit prompta te qui, at utinam fuisset elaboraret sea. Per iisque corpora mediocritatem ut, dolor putent temporibus vix ei, vitae cetero no ius. Error graecis ut vix, sit ut mucius
torquatos consetetur. Ne nec integre pertinax. Legendos quaestio eum cu.
</p>
<p>
Scripta delicata sit et, te reque elitr nam. Per aperiam ancillae splendide ei, quo mundi accusamus cu. Te diceret gubergren sea, eu per lobortis efficiendi. Mea primis temporibus et, in habemus perpetua est. Has minim aeque no, iusto choro ut mel, qui
ei populo epicuri dissentiunt.
</p>
<p>
Ullum conceptam usu ne, iisque fierent deterruisset id per, ad sea utinam convenire sententiae. Has cu quis sint, ne saepe debitis iudicabit pri, cum ut utamur appareat consetetur. Homero eloquentiam ut ius. Agam persius per no, usu reque delenit sententiae
cu, mutat vitae at cum. In aeterno legimus pertinax per, in periculis adolescens mel. Sea et fierent adolescens.
</p>
<p>
Sed ei iisque commune, te quo rebum indoctum salutandi. Hinc decore adolescens qui cu, pro maiorum posidonium referrentur an, commodo nominati concludaturque eam ut. Civibus pericula euripidis usu cu, solet latine dissentiet cum eu, ne brute sapientem
voluptaria mel. No commodo copiosae vel, audire commodo has ea. Quas minimum sea at, erant vocent eam an. Est habeo volumus an, ne verterem partiendo intellegebat ius.
</p>
<p>
Errem volutpat ei qui, no pri duis scripta delicata. Usu integre erroribus contentiones te, cu putant deterruisset sea, cum an iusto dissentiet. At natum probo vix, ad eos laudem disputando, id commodo prompta cum. Et habemus recusabo dignissim pri, ea
pri natum iuvaret. Epicuri apeirian scriptorem ei has, inermis petentium splendide et sit, sea everti menandri quaerendum at.
</p>
</div>
<!-----------------------------------------Before this-->
</body>
</html>
I'm not quite sure why you want the click on the div itself, but yeah you can get around the child elements being the click handler.
$('#main').click(function(e) {
if ( e.target.id === "main" ) {
if ( $(this).hasClass('expanded') ) {
$(this).removeClass('expanded');
} else {
$(this).addClass('expanded');
}
}
});
Try this code, it may help. Help you to show/hide any object through this very simple way.
HTML Code:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit mi, rutrum eget egestas eu, dapibus sit amet ex. Fusce aliquet vestibulum erat, at viverra tellus pellentesque ac.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
Script:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
