JavaScriptのトグルボタンを作成するには？

Question

私はこのコードを持っているが、それは動作しません：

HTML：

<button id="btn_search">Search</button> 
<input id="srh" type="search"> 

JS：

var btnSearch = document.getElementById("btn_search"); 
var search = document.getElementById("srh"); 

if (document.addEventListener) { 
    btnSeach.addEventListener('click',activeSearch); 
} else if (document.attackEvent) { 
    btnSearch.attackEvent('onclick',activeSearch); 
} 

function activeSearch (event) { 
    event.preventDefault(); 
    if (search.style.width == '0') { 
    search.style.width = '14.8em'; 
    search.style.opacity = '1'; 
} else if (search.style.width == '14.8em') { 
    search.style.width = '0'; 
    search.style.opacity = '0'; 
} 

は私が何をすべきトグルボタン が必要ですか？

Answer 1

あなたは要素を表示/非表示にするには、のtoggle（）を使用すると思います。

var btnSearch = document.getElementById("btn_search"); 
 
btnSearch.addEventListener('click', function(event){ 
 
    var search = document.getElementById("srh"); 
 
    search.classList.toggle("hidden"); 
 
    event.preventDefault(); 
 
});

#srh { width: 14.8em; } 
 
#srh.hidden { display: none; }

<button id="btn_search">Search</button> 
 
<input id="srh" type="search" />

Answer 2

あなたは、単にすべてのproccessを簡素化するためにjQueryのを使用することができます。あなたがタイプミスを持って

function magictoggle(a) { 
 
    if (a == 1) { 
 
    $("#btn1").attr("onclick", "magictoggle(0)"); 
 
    $("#searchbox").hide(1000); 
 
    //1000 Are the miliseconds will take the box to hide 
 
    } else { 
 
    $("#btn1").attr("onclick", "magictoggle(1)"); 
 
    $("#searchbox").show(1000); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn1" onclick="magictoggle(1)">Search</button> 
 
<input type="text" id="searchbox" placeholder="A search Box">