Question

I’m looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I’m working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile

What I want to happen is when users click on the search icon at the top, a search box appears. I don’t want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.

Any recommendations for code or libraries for me to look at what be great. I don’t need you to give me the code, but my Google searches aren’t turning up exactly what I’m looking for.

Answer 1

jQuery’s hide() and show() will do exactly that (they don’t have any accordion effect, they just appear and dissapear with no ornaments).

$('#HtmlId').hide();
$('#HtmlId').show();

Additionally you get toggle(), to hide if shown and show if hidden:

$('#HtmlId').toggle();

—- Edit —-
After reading your comment, imagine you have the html:

<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li> 

And the div to hide/show is:

<div id="search"> <gcse:search></gcse:search> </div>

Then you bind the click event to the image with the callback function performing the toggle:

$("#hideShowIcon").click(function() {
    $('#search').toggle();
});

—– Edit 2—–

I saw your site and you don’t have a document ready function. Basically it should look like this:

$(document).ready(function() {
  $("#hideShowIcon").click(function() {
        $('#search').toggle();
  });
 });

If you don’t add this, jQuery tries to bind the action to an element that doesn’t exist yet.