使用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

回答