Toggle using onclick

JavaScript
1

I’m trying to have a function run whenever a button is vlicked

<button type="button" class="btn btn-sm btn-outline-info" onclick="switchOrientation"><span class="icon-repeat"></span>&nbsp;&nbsp;Rotate</button>

heres the function

function switchOrientation() {
console.log("Clicked");
  var x = document.getElementById("back_orientation");
  var y = document.getElementById("front_orientation");
  if (x.style.display === "none") {
    y.style.display = "none";
    x.style.display = "block";
  } else {
    x.style.display = "none";
    y.style.display = "block";
  }
}

but nothing happens when I click on the button, even nothing in the console

2

You should not doing doing event listeners in the HTML like that…but I’ll answer nonetheless.

I’ll give you a hint: it’s to do with your HTML and the fact you’re not calling the function properly :slight_smile: . (Should be obvious since you noted yourself it’s not running).

3

Hi there lurtnowski,

your switching project could now be done with CSS. :winky:

coothead

4

OH, when I call the function, I didn’t have ()
why do some idiots not have parenthesies?

It works with javascript, but how would do the same thing with CSS?

you can have event listeners there

5

Like this, perhaps?

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#cb {
    position:absolute;
    left: -999em;
 }

#rotate {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-image: linear-gradient( to bottom, #fff, #ccc );
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
    cursor: pointer;
 }

#back_orientation {
    display:none;
 }

#cb:checked ~ #back_orientation {
    display: block;
 }

#cb:checked ~ #front_orientation {
    display: none;
 }
</style>

</head>
<body>
 
 <input id="cb"type="checkbox">
 <label id="rotate" for="cb">Rotate</label>

 <div id="back_orientation">back orientation</div>
 <div id="front_orientation">front orientation</div>

</body>
</html>

coothead

1 Like
6

That is sneaky :slight_smile:

I’m looking forward to experiment to replace verbose accordion scripts.

Edit:
Replaced concertina with accordion :slight_smile:

7

Something like this, maybe?

https://www.coothead.co.uk/css-accordian/index.html

coothead

1 Like
8

I was hoping to use the toggle features something like this:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em 
      BlinkMacSystemFont, -apple-system, 'Segoe UI', 
      roboto, helvetica, arial, sans-serif;
 }

#xcb,
#cb  {position:absolute; left: -999em;}

#xrotate,
#rotate {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-image: linear-gradient( to bottom, #fff, #ccc );
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
    cursor: pointer;
 }

#xback_orientation,
#back_orientation {display:none;}

#xcb:checked ~ #xback_orientation,
#cb:checked  ~ #back_orientation   {
  display: block; 
  background-color: lime; 
  width:42%; height:8em;
  margin:0 auto;
}

#xcb:checked ~ #xfront_orientation,
#cb:checked  ~ #front_orientation  {display: none; height: 0;}

.hhh {display:none;}
</style>

</head>
<body>
 
 <div class="accordion">
   <input id="cb"type="checkbox">
   <label id="rotate" for="cb">Show</label>

   <div id="back_orientation">back orientation</div>
   <div class="hhh" id="front_orientation">front orientation</div>
 </div>  

 <div class="accordion">
   <input id="xcb"     type="checkbox">
   <label id="xrotate" for="xcb">Show</label>

   <div id="xback_orientation"> back orientation</div>
   <div  class="hhh" id="xfront_orientation">front orientation</div>
 </div>  

</body>
</html>
9

Hi there John,

why are you using class="hhh" ?

coothead

10

The message was not required so I decided to hide rather than delete.

You may have noticed I changed the button text to “Show” but think it would have been better to have “Toggle” or “Flip”

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.