使用javascript隐藏/显示html内容

我在寻找能让更多HTML在用户点击图标时出现在网站上的javascript。我正在研究我的第一个移动设计，并且正在使用html，css和javascript构建原型。这是我到目前为止：http://www.patthorntonfiles.com/snk_mobile 使用javascript隐藏/显示html内容

我想要发生的是，当用户点击顶部的搜索图标时，出现一个搜索框。我不想要jquery手风琴效果或类似的东西。我只想让一些HTML出现，然后在用户再次点击图标或点击搜索时消失。

任何代码或库的建议，我看看什么是伟大的。我不需要你为我提供代码，但我的Google搜索并没有完全满足我的要求。

升级到jQuery的最新版本，如果你正在开始一个新的项目！ 1.6.2已老。 – ErikE

-2

jQuery的隐藏（）和显示（）将恰恰如此（他们没有任何折叠效果，他们只是出现，没有饰dissapear）。

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

此外你切换（），隐藏如果显示，并显示是否隐藏：

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

---- ----编辑阅读您的评论之后，想象你有在html：

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

并隐藏DIV /显示的是：

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

然后绑定click事件的图像与执行切换的回调函数：

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

-----编辑----- 2

我看到了你的网站，您没有文档准备就绪功能。基本上它应该看起来像这样：

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

如果不添加此项，jQuery会尝试将操作绑定到尚不存在的元素。

2012-11-23 22:28:45 alemangui

开关听起来像我正在寻找的。我今天有点慢。你能不能帮点我在正确的方向，以我如何能与此代码使用它：这是我的搜索图标：

，然后这就是实际的搜索框会出现： \t

\t \t \t \t

–

嘿，我编辑了我的答案。请注意，为了简单起见，我在图像中添加了一个ID字段（但您可以设计一个不同的选择器） – alemangui

我已经编写了代码，但是我还没有完成此工作。我对jquery很陌生，所以我可能错过了一些明显的东西。这就是我的CSS搜索的样子： #search { \t display：none; \t} –

我知道你说你不想使用jQuery手风琴效果，但使用jQuery来设置不透明度的动画？请看下面。

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

2012-11-23 22:30:15 dev

这里有一个非jQuery的解决方案：

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

和

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

2012-11-23 22:31:11

回答