Div show on image click jquery

Question

I'm a newbie to jquery code and I need a little help...So, what I want to do is that the div #searchActive to be initially hidden, and when I click on image with id "press", I want div #searchActive to appear, and again when I press that image, the div will be hidden. I know that this thing has been explained before, but I just can't make it work...

HTML:

<div id="bar">
                <ul id="nav_top">
                    <li class="selected"><a href="#">Home</a></li>
                    <li><a href="#">Producten</a></li>
                    <li><a href="#">Nieuws</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">Gallerij</a></li>
                    <li><a href="#">Over</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><img id="press" src="images/search.png" /></li>
                </ul>
            </div>
            <div id="searchActive">
                <form>
                    <input type="text" name="search" placeholder="" />
                    <img src="images/search.png" />
                </form>
            </div>

CSS :

#searchActive {
    width: 300px;
    height: 60px;
    background: url('images/searchBackground.jpg');
    position: absoute;
    float: right;
    margin-right: 234px;
}
#searchActive form {
    overflow: hidden;
    float: left;
    margin: 12px 0 0 12px;
    border: none;
}
#searchActive input[type=text]{

    width: 249px;
    height: 35px;
    font-size: 16px;
    border: none;
} 
#searchActive img {
    margin-left:5px;
}

Answer 1

Try that in a Javscript file included on your page :

// when DOM is fully loaded from server
$(document).ready(function() {

    // init some jQuery elements you need
    var searchActive = $('div#searchActive');
    var press = $('img#press');

    // hide on init
    searchActive.hide() // <-- you can do that in CSS too : #searchActive { display:none }

    // declare listener for click events on element img#press
    press.on('click', function(e) {

        // if visible, hide, if hidden, show
        searchActive.toggle();

        // stop the click event, not really necessary since the clicked element is an img
        e.preventDefault();
    }); // <-- added ");" here
});

More info :

http://api.jquery.com/toggle/

http://api.jquery.com/on/

http://api.jquery.com/hide/

Good luck

Answer 2

I think you want something like this:

$('#press').click(function(){ //when I click on image with id "press"
  $('#searchActive').toggle(); //I want div #searchActive to appear when I press that image, the div will be hidden
});

Take a look at: http://api.jquery.com/click/ and http://api.jquery.com/toggle/