Javascript and jQuery hide and show not working

Question

I'm trying to hide and show the contact form (using display:"none" and display:"block") when clicking the button "click me!". I've tried multiple javascript and jquery examples but none of them seem to work for me. It would be nice if the form would slide in and out under the click me button.

Can someone help me?

Visit this link to see my code http://jsfiddle.net/jm2o73f2/9/

function myFunction() {
    var x = document.getElementById("hidden");
    x.style.
}

body, img, ul, li, div, input, textarea {
    margin:0;
    padding:0;
    
}
#footer {
    width:100%;
    background:#CCC;
    clear:both;
    margin-bottom:-20px;
}
#footer img {
    cursor:pointer;   
}
#footer ul {
    list-style:none;
    width:250px;
    padding-top:10px;
    margin: 0 auto;
    text-align:center;
}
#footer #contact {
    width:400px;
    margin:auto;
    display:block;
    background:white;
    text-align:left;
}
#footer #contact textarea {
    width:250px;
    resize:none;
}
#footer #contact input {
    width:250px;
    margin: 5px 0;
}
#footer #contact input[type="submit"] {
   width:100px; 
    cursor:pointer;
}

<body>
  <div id="footer">
        <div id="contact">
            <ul><li>Vragen? Stuur ons gerust een email.</li><li><button type="button" onclick="myFunction()">Click Me!</button></li></ul>
            <div id="hidden">
            <ul><li><input type="text" name="naam" id="naam" /></li><li><input type="text" name="email" id="email" /></li><li><textarea  name="condolatie" id="condolatie" cols="45" rows="5"></textarea></li><li><input type="submit" name="submit" id="submit" value="Verzend" /></li></ul></div>
        </div>
    </div>  
</body>

The site isn't uploaded yet. This is my code on jsfiddle jsfiddle.net/jm2o73f2/9 Hope this helps. — Kenkey
– Kenkey, Commented Dec 10, 2014 at 15:40
Thanks a lot everyone! I've found some working solutions thanks to you guys. Sorry for my beginner mistakes, I still have a lot to learn :) — Kenkey
– Kenkey, Commented Dec 10, 2014 at 15:49

David Passmore · Accepted Answer · 2014-12-10 16:12:53Z

1

A simple solution without seeing your code would be:

$(function(){
    $('.revealButton').click(function(){
        $('.hiddenDiv').toggle();
    });
});

Hope this helps, however, once your code is here I will update this answer :)

UPDATE

Here is a working jQuery version for you: jsFiddle

$(function () {
    $('.revealButton').click(function () {
        $('#hidden').toggle();
    });
});

Also, on your button remove onClick="myFunction()" and add class="revealButton".

and that's it.

UPDATE 2

If you would like a slide animation (as mentioned in the comments) use this: jsFiddleUpdate

$(function () {
    $('.revealButton').click(function () {
        $('#hidden').slideToggle();
    });
});

edited Dec 10, 2014 at 16:12

answered Dec 10, 2014 at 15:41

David Passmore

6,0894 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Spokey Over a year ago

@Kenkey if you want with a slide animation you can use .slideToggle() instead of .toggle(). I noticed you mentioned that in your question.

Spokey · Accepted Answer · 2014-12-10 15:44:21Z

You need to put your code in head or before the end of body. You then need to check if the element is hidden or not the do the appropriate action

function myFunction() {
  var x = document.getElementById("hidden").style;
  x.display === 'none' ? x.display = 'block' : x.display = 'none';
  // is display none ? set to block else set to none
}

function myFunction() {
  var x = document.getElementById("hidden").style;
  x.display === 'none' ? x.display = 'block' : x.display = 'none';
}

body, img, ul, li, div, input, textarea {
    margin:0;
    padding:0;
    
}
#footer {
    width:100%;
    background:#CCC;
    clear:both;
    margin-bottom:-20px;
}
#footer img {
    cursor:pointer;   
}
#footer ul {
    list-style:none;
    width:250px;
    padding-top:10px;
    margin: 0 auto;
    text-align:center;
}
#footer #contact {
    width:400px;
    margin:auto;
    display:block;
    background:white;
    text-align:left;
}
#footer #contact textarea {
    width:250px;
    resize:none;
}
#footer #contact input {
    width:250px;
    margin: 5px 0;
}
#footer #contact input[type="submit"] {
   width:100px; 
    cursor:pointer;
}

<div id="footer">
  <div id="contact">
    <ul>
      <li>Vragen? Stuur ons gerust een email.</li>
      <li>
        <button type="button" onclick="myFunction()">Click Me!</button>
      </li>
    </ul>
    <div id="hidden">
      <ul>
        <li>
          <input type="text" name="naam" id="naam" />
        </li>
        <li>
          <input type="text" name="email" id="email" />
        </li>
        <li>
          <textarea name="condolatie" id="condolatie" cols="45" rows="5"></textarea>
        </li>
        <li>
          <input type="submit" name="submit" id="submit" value="Verzend" />
        </li>
      </ul>
    </div>
  </div>
</div>

David Passmore · Accepted Answer · 2014-12-10 15:56:47Z

0

Using JQuery, you should use:

$("#hidden.isHidden").show().removeClass("isHidden");

to show your element from its ID "hidden", and that to hide it:

$("#hidden").hide().addClass("isHidden");

EDIT:

you could also use this code to detect if your element is hidden:

if ($("#hidden").is(':hidden')) { ... }

and to test if it is displayed:

if ($("#hidden").is(':visible')) { ... }

edited Dec 10, 2014 at 15:56

David Passmore

6,0894 gold badges48 silver badges71 bronze badges

answered Dec 10, 2014 at 15:45

Banov

2973 silver badges15 bronze badges

Collectives™ on Stack Overflow

Javascript and jQuery hide and show not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related