Joshua Joshua - 1 year ago 47
HTML Question

How to hide elements, then reveal them when the DIV holding them gets clicked

This is sort of hard to explain without you seeing it, so I recommend you look at the JSFiddle I posted. So basically when a certain div is clicked it expands down to reveal some inputs and buttons, but the problem I am having is that when the document loads the inputs and buttons are visible, when they should only appear when the DIV they are in expands to reveal them. I have already tried using .hide() in every way possible and cant figure out how to fix it.

https://jsfiddle.net/v8u2q8re/

<div>
<div class='box' id='emailVer'>
<h2 id='payText'>PAYMENT</h2>
</div>

<div class='box' id='accCust'>
<h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
</div>

<div class='box' id='pay'>
<h2 id='evText'>EMAIL VERIFICATION</h2>
<div id='inputArea1' class='inputAreas'>
<input id='email' class='evInput'>
<input id='comf' class='evInput'>
<button id='sndCde' class='evBut'>Send Code</button>
<button id='comfBut' class='evBut'>Comfirm</button>
</div>
</div>
</div>


JS:

var main = function(){
$('.box').click(function() {
var el = $(this);
if (!el.hasClass('selected')) {
el.animate({
"height": "300px"
}, 200)
el.addClass("selected");
$('#inputAreas').show();
} else {
el.animate({
"height": "85px"
}, 200);
$('#inputAreas').hide();
el.removeClass("selected");
}
}
)}
$(document).ready(main);


I decided to leave the css out of the post as I do not think it matters for the problem I am having.

Answer Source

Add

.inputAreas {
  display: none;
}

to your css to initially hide them. And then change

$('#inputAreas').show();

to

el.find('.inputAreas').show();

Example