CODEWITHSUNDEEP
javascriptjqueryhtmlanimationjquery-animate
Joshua
Joshua

Reputation: 822

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.

Upvotes: 0

Views: 51

Answers (2)

Seth
Seth

Reputation: 170

To fix this, add overflow to your CSS under .box:

.box { ... overflow:hidden; }

Now anything "overflowing" your .box will be hidden. Though you may need to mess with the css some more for it to look the way you'd like. Good luck!

Update: Here's a fiddle example: https://jsfiddle.net/doercreator/v8u2q8re/2/

Upvotes: 1

empiric
empiric

Reputation: 7878

Add 

.inputAreas {
  display: none;
}

to your css to initially hide them. And then change

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

to 

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

Example

Upvotes: 3

Related Questions