neo33 neo33 - 5 months ago 11
Javascript Question

How to call a jquery funcion with a css button?

Hello I am writing a script, I have two javascript buttons called: Hide and Show:

<button id="hide">Hide</button>
<button id="show">Show</button>


they actually works well but I would like to repace them for css buttoms that I designed called too Hide and Show:

<button class="button button1" onclick="hide">Hide</button>
<button class="button button1" onclick="show">Show</button>


The problem is that they don't work well since they don't call the jquery function appropriately, I am trying to call it with its id as follows:

<button class="button button1" onclick="hide">Hide</button>
<button class="button button1" onclick="show">Show</button>


But whein I try to use them they don't work, I would like to appreciate any suggestion to overcome this situation a jsfiddle file is provided to explain better the situation: https://jsfiddle.net/adolf33/d6q9qjko/42/ .

Answer

JS Fiddle

HTML - aplly () to make it a function call

<button class="button button1" onclick="hide()">Hide</button>
<button class="button button1" onclick="show()">Show</button>

JS - create the functions

function hide() {
  $("#texto").hide();
}

function show() {
  $("#texto").show();
}

Or simply apply the classes to the current buttons with ids and call it a day since its already working:

JS Fiddle

<button id="hide" class="button button1">Hide</button>
<button id="show" class="button button1">Show</button>