How to make javascript toggle button?

Question

I have this code but it doesn't work:

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

I need a toggle button What should I do?

You have a typo. The correct method name is attachEvent() (not attack). — PM 77-1
– PM 77-1, Commented Sep 7, 2016 at 18:26
A toggle button is one that 'toggles' something on and off. The code you posted looks like code for a search input field. I am quite sure if you search the site you will find how to make a toggle button. — rmcsharry
– rmcsharry, Commented Sep 7, 2016 at 20:24

JonSG · Accepted Answer · 2016-09-07 18:35:45Z

1

I might think about using a CSS class and toggle() to show/hide you element.

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" />

answered Sep 7, 2016 at 18:35

JonSG

13.6k2 gold badges31 silver badges48 bronze badges

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

Comments

MrViK · Accepted Answer · 2016-09-07 18:54:42Z

0

You can simply use JQuery to simplify all the proccess. Make all the code as simple as:

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">

answered Sep 7, 2016 at 18:54

MrViK

1241 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to make javascript toggle button?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related