CODEWITHSUNDEEP
javascriptjquery
Kenkey
Kenkey

Reputation: 15

Javascript and jQuery hide and show not working

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>

Upvotes: 1

Views: 108

Answers (3)

David Passmore
David Passmore

Reputation: 6099

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();
    });
});

Upvotes: 1

Banov
Banov

Reputation: 297

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')) { ... }

Upvotes: 0

Spokey
Spokey

Reputation: 10994

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>

Upvotes: 0

Related Questions