Hide/show html content with javascript

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.

Upgrade to the latest version of jQuery if you're starting a new project! 1.6.2 is old. — ErikE
– ErikE, Commented Nov 23, 2012 at 22:30

user529758 · Accepted Answer · 2012-11-23 22:31:11Z

7

Here's a non-jQuery solution:

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

and

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

answered Nov 23, 2012 at 22:31

user529758

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

Comments

dev · Accepted Answer · 2012-11-23 22:30:15Z

0

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

answered Nov 23, 2012 at 22:30

dev

4,0093 gold badges26 silver badges36 bronze badges

Comments

alemangui · Accepted Answer · 2012-11-24 16:06:09Z

-2

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.

edited Nov 24, 2012 at 16:06

answered Nov 23, 2012 at 22:28

alemangui

3,66526 silver badges33 bronze badges

8 Comments

Patrick Thornton Over a year ago

The toggle sounds like exactly what I'm looking for. I'm a little slow today. Could you help point me in the right direction as to how I could use it with this code: This is where my search icon is: <li><img src="patthorntonfiles.com/snk_mobile/search.gif" width="50px'"/></li> and then this is where the actual search box would appear: <div id="search"> <gcse:search></gcse:search> </div>

alemangui Over a year ago

Hey I edited my answer. Please note I added an ID field to the image for simplicity (but you can just design a different selector)

Patrick Thornton Over a year ago

I've the code in, but I haven't gotten this to work yet. I'm very new to jquery, so I'm probably missing something obvious. This is what my CSS looks like for search: #search { display: none; }

alemangui Over a year ago

Try putting the css in the tag. Remove it from the #search rule from the css file. Your search html tag should be : <div id="search" style="display: none;"> <gcse:search></gcse:search> </div>

Patrick Thornton Over a year ago

OK, I put the CSS inline, but nothing is happening when I click the search icon. Is there a specific place I need to put the callback function? I have it in the header above the nav bar: <script> $("#hideShowIcon").click(function() { $('#search').toggle(); }); </script>

|

Collectives™ on Stack Overflow

Hide/show html content with javascript

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related