CODEWITHSUNDEEP
javascript
Patrick Thornton
Patrick Thornton

Reputation: 13

Hide/show html content with javascript

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.

Upvotes: 0

Views: 1349

Answers (3)

alemangui
alemangui

Reputation: 3655

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.

Upvotes: -2

user529758
user529758

Reputation:

Here's a non-jQuery solution:

document.getElementById("identifier").style.setProperty("visibility", "hidden");

and

document.getElementById("identifier").style.setProperty("visibility", "visible");

Upvotes: 7

dev
dev

Reputation: 4009

I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below. 

$("#idClicked").click(function() {
   $("#searchBox").fadeTo("fast", 1);
});

Upvotes: 0

Related Questions