I can't get the following code to work properly.
I have a simple menu.
One of the items contains a submenu.
I'd like it to collapse and uncollapse upon clicking the item.
For some reason it only uncollapses the first sub-item and not the rest.
I could not find a similar thread, thats why I am positing my question here.
All help is welcome
function toggleSubmenu(e) {
e.classList.toggle("active");
var panel = e.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
.c-menu {
position: absolute;
width: 200px;
margin: 0px;
padding: 0;
background-color: #fff;
border-left: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.c-menu ul {
list-style-type: none;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 5px;
width: 100%;
height: 35px;
border: none;
border-bottom: 1px solid #CBCBCB;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.c-menu ul.active,
.c-menu ul:hover {
background-color: #EAEAEA;
}
.c-submenu {
list-style: none;
margin: 0;
padding: 0;
}
.c-submenu li {
border-bottom: 1px solid #CBCBCB;
height: 35px;
font-size: 14px;
padding: 10px 0 0 39px;
cursor: pointer;
}
.c-submenu li:hover {
background-color: #EAEAEA;
}
.c-panel {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='c-menu'>
<ul>A</ul>
<ul>B</ul>
<ul>C</ul>
<ul onclick='toggleSubmenu(this)'>OPEN</ul>
<ul class="c-submenu c-panel">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</div>
You need to toggle your panel.style.overflow property.
function toggleSubmenu(e) {
e.classList.toggle("active");
var panel = e.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
panel.style.overflow = "hidden";
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.overflow = "visible";
}
}
.c-menu {
position: absolute;
width: 200px;
margin: 0px;
padding: 0;
background-color: #fff;
border-left: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.c-menu ul {
list-style-type: none;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 5px;
width: 100%;
height: 35px;
border: none;
border-bottom: 1px solid #CBCBCB;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.c-menu ul.active,
.c-menu ul:hover {
background-color: #EAEAEA;
}
.c-submenu {
list-style: none;
margin: 0;
padding: 0;
}
.c-submenu li {
border-bottom: 1px solid #CBCBCB;
height: 35px;
font-size: 14px;
padding: 10px 0 0 39px;
cursor: pointer;
background-color: white;
}
.c-submenu li:hover {
background-color: #EAEAEA;
}
.c-panel {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='c-menu'>
<ul>A</ul>
<ul>B</ul>
<ul>C</ul>
<ul onclick='toggleSubmenu(this)'>OPEN</ul>
<ul class="c-submenu c-panel">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</div>
Related
I tried to add an animation for my form submit button on my Todo list.
Unfortunately, the same button animation works outside form, but inside form only can hover the text. I have no idea where the problem is?
import React from "react";
class TodoForm extends React.Component {
render() {
return (
<div>
<div className={"container"}>
<form action="">
<h1>Todo List</h1>
<input type="text" placeholder={""}/>
<button className="custom-btn btn">Submit</button>
</form>
<button className="custom-btn btn">Submit</button>
</div>
</div>
);
}
}
export default TodoForm;
.container {
display: flex;
flex-direction: row;
/*align-items: center;*/
justify-content: center;
margin-top: 5%;
}
form {
height: 500px;
width: 400px;
background-color: #f4f7fc;
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
input[type='text'] {
border: 1px solid #ddd;
height: 6%;
min-width: 60%;
transition: all ease-in 0.25s;
}
.custom-btn {
margin-left: 5px;
width: 25%;
height: 37px;
border-radius: 5px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
}
.custom-btn, input[type='text'] {
box-shadow: 1px 1px 1px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
.btn {
border: 2px solid #f4f7fc;
color: #f59cb1;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
.btn:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn:hover {
color: #FF6F91;
}
.btn:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn:active {
top: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
The background color doesn't let you see the animation, just comment it;
form {
height: 500px;
width: 400px;
/*background-color: #f4f7fc;*/
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>
I have a custom dropdown menu in pure html . i have tried everything to get it to close but nothing works. I just want it to close once something was selected / somewhere outside the menu is clicked. it appears as my custom css is preventing any simple solution.
here is the code i have for it and css and current js. i understand that this may be a frequently asked question but im still a novice at javascript and even though i feel as if i've implemented all the solutions i could, its possible i havent done so correctly. thank you
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>
Add this to your Javascript.
Include id to you <h1>
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
And you can even hide the dropdown by $('.dropdown').hide();
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>
You can simply use $(event.target).hasClass() condition to open or hide the dropdown...
Also don't use div inside a label because
Element div not allowed as child of element label in this context.
Stack Snippet
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
$(document).on("click", function(event) {
if ($(event.target).hasClass("dd-button")) {
$("#dropdown").slideDown("fast");
} else {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<div class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id="dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</div>
</div>
My submenu is disappearing on hover.Please show me how to fix it.
#header {
padding-left: 0;
padding-right: 0;
position: relative;
}
.wp-toolbar #header{
margin-top: 0;
}
#site-title, #site-description {
padding-left: 20px;
}
#theme-logo img {
box-shadow: none;
}
/* =Navigation
*/
#top-navigation {
position: absolute;
bottom: -10px;
right: 0;
}
#theme-top-menu {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#theme-top-menu .sub-menu {
left: auto;
right: 0px;
}
.menu .current_page_item a, .menu .current-menu-item a {
background-color: transparent;
}
#theme-top-menu a {
padding: 0 0.9em;
border: none;
font-weight: normal;
font-size: 80%;
}
#site-navigation{
padding: 0;
position: relative;
max-width: 1140px;
border-top: 1px solid #666666;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.fullwidth #site-navigation {
max-width: 100%;
}
#site-navigation .theme-wrap {
padding: 0 5px;
position: relative;
min-height: 50px;
}
#theme-menu-main {
margin: 0 auto;
background-color: transparent;
}
#theme-menu-main > li {
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
margin: 0;
padding: 10px 0;
}
#theme-menu-main > li a {
border: none;
font-weight: bold;
}
#theme-menu-main > li:hover {
background-color: transparent;
}
#theme-menu-main > li > ul {
top: 50%;
left: 0.9em;
padding: 10px 0;
}
#theme-menu-main > li ul > li a {
margin: 0 10px;
padding: 5px 10px;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 100;
}
#theme-menu-main > li ul > li:last-child a{
border: none;
}
#theme-menu-main > li > a span{
padding: 0 0 2px;
border-bottom: 3px solid transparent;
}
#theme-menu-main a {
background-color: transparent;
font-weight: 100;
}
.menu a:hover { background: none; }
Try this:
ul li:hover ul {
display:block;
}
I'm trying to use a button to remove the class .computer-off and add .computer-on and vice versa when clicked again. I've tried quite a few approaches, but to no avail. Here's one approach:
HTML:
<div id="computer-screen" class="computer-off">
<button onclick="computerPower()" class="power-button">Power</button>
</div>
JS:
function computerPower() {
if ( $("#computer-screen").hasClass('computer-off') ) {
document.getElementById('computer-screen').removeClass('computer-off').addClass('computer-on');
} else {
document.getElementById("computer-screen").removeClass('computer-on').addClass('computer-off');
}
};
I'd suggest, given that you appear to (be trying to) use jQuery:
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
Or, in plain JavaScript:
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
References:
JavaScript:
document.querySelector().
Element.classList.
jQuery:
toggleClass().