highlight span per div tag - javascript

Got this multiple choices examination..
I am in a part where the examinee choosing the correct answer,
I am doing it fine but the problem is when i add the number two question..
which the highlight answer changing also into another div. Any logic or other way without changing the HMTL.........................................
Here's my code
document.querySelectorAll(".__QNnChoiceContainer").forEach((chosenAns) => {
$(chosenAns).on('click', '.__choicesMLExam', function () {
$('.__QNnChoiceContainer .__choicesMLExam.__theAnswerMLExam').removeClass('__theAnswerMLExam');
$(this).addClass('__theAnswerMLExam');
});
})
.__theAnswerMLExam{
position:relative;
}
.__theAnswerMLExam:before{
content:"";
background-color:#d2ffd2;
width:100%;
height:1em;
position:absolute;
z-index:-1;
filter:url(#marker-shape);
top:0.1em;
padding:0 0.25em;
}
#QuestionMLExam{
font-size: 25px;
}
.ChoicesExam{
font-size: 22px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 45%;
}
.__choicesMLExam{
font-weight: normal !important;
cursor: pointer;
width: auto;
}
.__QNnChoiceContainer{
margin: 20px 0;
}
.__rightChoiceExamML, .__leftChoiceExamML{
display: flex;
justify-content: space-between;
flex-direction: column;
}
.__wrapContainerExamML{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 75px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="__QNnChoiceContainer">
<label id="QuestionMLExam">1. What is the type of pin that has 3 swaged grooves at 120⁰ pitch along its side?</label>
<div class="ChoicesExam">
<div class="__leftChoiceExamML">
<label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
<label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
</div>
<div class="__rightChoiceExamML">
<label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
<label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
</div>
</div>
</div>
<div class="__QNnChoiceContainer">
<label id="QuestionMLExam">2. What is the type of pin that was used to control compression of part made with Plastic?</label>
<div class="ChoicesExam">
<div class="__leftChoiceExamML">
<label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
<label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
</div>
<div class="__rightChoiceExamML">
<label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
<label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
</div>
</div>
</div>
<div class="__QNnChoiceContainer">
<label id="QuestionMLExam">3. What is the Taper Ratio of a Taper Pin?</label>
<div class="ChoicesExam">
<div class="__leftChoiceExamML">
<label>a. <span id="choicesAExamML" class="__choicesMLExam">2:1</span></label>
<label>b. <span id="choicesBExamML" class="__choicesMLExam">1:50</span></label>
</div>
<div class="__rightChoiceExamML">
<label>c. <span id="choicesCExamML" class="__choicesMLExam">1:100</span></label>
<label>d. <span id="choicesDExamML" class="__choicesMLExam">2:50</span></label>
</div>
</div>
</div>


You can target currently clicked question block. Then add/remove class for that question only.
Code Example:
$('body').on('click', '.__choicesMLExam', function () {
$(this).parents('.ChoicesExam').find('.__choicesMLExam').removeClass('__theAnswerMLExam');
$(this).addClass('__theAnswerMLExam');
});
.__theAnswerMLExam{
position:relative;
}
.__theAnswerMLExam:before{
content:"";
background-color:#d2ffd2;
width:100%;
height:1em;
position:absolute;
z-index:-1;
filter:url(#marker-shape);
top:0.1em;
padding:0 0.25em;
}
#QuestionMLExam{
font-size: 25px;
}
.ChoicesExam{
font-size: 22px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 45%;
}
.__choicesMLExam{
font-weight: normal !important;
cursor: pointer;
width: auto;
}
.__QNnChoiceContainer{
margin: 20px 0;
}
.__rightChoiceExamML, .__leftChoiceExamML{
display: flex;
justify-content: space-between;
flex-direction: column;
}
.__wrapContainerExamML{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 75px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="__QNnChoiceContainer">
<label id="QuestionMLExam">1. What is the type of pin that has 3 swaged grooves at 120⁰ pitch along its side?</label>
<div class="ChoicesExam">
<div class="__leftChoiceExamML">
<label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
<label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
</div>
<div class="__rightChoiceExamML">
<label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
<label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
</div>
</div>
</div>
<div class="__QNnChoiceContainer">
<label id="QuestionMLExam">2. What is the type of pin that was used to control compression of part made with Plastic?</label>
<div class="ChoicesExam">
<div class="__leftChoiceExamML">
<label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
<label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
</div>
<div class="__rightChoiceExamML">
<label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
<label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
</div>
</div>
</div>
<div class="__QNnChoiceContainer">
<label id="QuestionMLExam">3. What is the Taper Ratio of a Taper Pin?</label>
<div class="ChoicesExam">
<div class="__leftChoiceExamML">
<label>a. <span id="choicesAExamML" class="__choicesMLExam">2:1</span></label>
<label>b. <span id="choicesBExamML" class="__choicesMLExam">1:50</span></label>
</div>
<div class="__rightChoiceExamML">
<label>c. <span id="choicesCExamML" class="__choicesMLExam">1:100</span></label>
<label>d. <span id="choicesDExamML" class="__choicesMLExam">2:50</span></label>
</div>
</div>
</div>

Related

How to get hex color code from css and automatically display in div?

I am designing a color palette for my website. What I'm trying to do is get the color code from the css to the <span class = "hexcode"> hex of css </span> tag
Let me explain: when I set a certain color in the css for example .color.b50 {background: # E9F1FD; }, I want the span tag to automatically acquire the value of .color.b50 to show me as code. This way I would avoid having to manually put the code in the span tag each time.
As I will have many colors this will save me time.
Is it possible to do this with js or jQuery?
.global-row {
display: flex;
justify-content: space-between;
gap: 20px;
}
.global-box {
display: flex;
flex-direction: column;
}
.label {
margin-top: 10px;
}
.color {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 15px;
box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.50);
gap: 20px;
}
/*List of Color*/
.color.b50 { background: #E9F1FD; }
.color.b100 { background: #C0D7F9; }
.color.b200 { background: #98BDF6; }
.color.b300 { background: #6FA4F2; }
.color.b400 { background: #478AEF; }
.color.b500 { background: #1E70EB; }
.color.b600 { background: #1A62CE; }
.color.b700 { background: #1754B0; }
.color.b800 { background: #134693; }
.color.b900 { background: #0F3876; }
<div class="main-container">
<div class="global-row">
<div class="global-box">
<span class="color b50">50</span>
<span class="label">50</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b100">100</span>
<span class="label">100</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b200">200</span>
<span class="label">200</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b300">300</span>
<span class="label">300</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b400">400</span>
<span class="label">400</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b500">500</span>
<span class="label">500</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b600">600</span>
<span class="label">600</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b700">700</span>
<span class="label">700</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b800">800</span>
<span class="label">800</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b900">900</span>
<span class="label">900</span>
<span class="hexcode">#000</span>
</div>
</div>
<div class="row-2">
<div class="global-box">
</div>
</div>
<div class="row-3">
<div class="global-box">
</div>
</div>
</div>

You can get CSS properties using .css()
However, you only get the background color in rgb, so you have to convert it in hex first. I used the answer of this SO question to convert the data via
const rgb2hex = c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;.
Finally, loop over your elements and add the generated hex code to the last silbling.
const $colors = $('.color');
$colors.each(function(index, elem) {
let css = rgb2hex($(elem).css("background")).substring(0,7).toUpperCase();
$(elem).siblings(":last").text(css);
});
Enjoy.
const rgb2hex = c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;
$(document).ready(function(){
const $colors = $('.color');
$colors.each(function(index, elem) {
let css = rgb2hex($(elem).css("background")).substring(0,7).toUpperCase();
$(elem).siblings(":last").text(css);
});
});
.global-row {
display: flex;
justify-content: space-between;
gap: 20px;
}
.global-box {
display: flex;
flex-direction: column;
}
.label {
margin-top: 10px;
}
.color {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 15px;
box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.50);
gap: 20px;
}
/*List of Color*/
.color.b50 { background: #E9F1FD; }
.color.b100 { background: #C0D7F9; }
.color.b200 { background: #98BDF6; }
.color.b300 { background: #6FA4F2; }
.color.b400 { background: #478AEF; }
.color.b500 { background: #1E70EB; }
.color.b600 { background: #1A62CE; }
.color.b700 { background: #1754B0; }
.color.b800 { background: #134693; }
.color.b900 { background: #0F3876; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
<div class="global-row">
<div class="global-box">
<span class="color b50">50</span>
<span class="label">50</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b100">100</span>
<span class="label">100</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b200">200</span>
<span class="label">200</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b300">300</span>
<span class="label">300</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b400">400</span>
<span class="label">400</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b500">500</span>
<span class="label">500</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b600">600</span>
<span class="label">600</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b700">700</span>
<span class="label">700</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b800">800</span>
<span class="label">800</span>
<span class="hexcode">#000</span>
</div>
<div class="global-box">
<span class="color b900">900</span>
<span class="label">900</span>
<span class="hexcode">#000</span>
</div>
</div>
<div class="row-2">
<div class="global-box">
</div>
</div>
<div class="row-3">
<div class="global-box">
</div>
</div>
</div>

How do I make my javascript function change the color of my text?

I'm trying to make a website. And, on my website, on the menu page, I want my menu options to change color depending on which one has been clicked on. For example, when the page loads, it automatically starts on main, so the main button is green. But, when I click vegoption, I want vegoption to turn green and mainoption to turn black. And the same system for the other options.
Please forgive me if I have done things wrong in my javascript. I'm very new to the language. If there are any other improvements I can make, please let me know.
Here is the code:
/* Start Variables */
:root {
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper {
// background: blue;
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside {
// background: green;
width: 50%;
height: 10px;
}
.rightside {
width: 50%;
// background: red;
}
.options {
// background: yellow;
text-decoration: none;
width: 100%;
display: flex;
justify-content: flex-end;
}
.linkhome {
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu {
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout {
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood {
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture {
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover {
color: var(--aa-color);
}
.linkabout:hover {
color: var(--aa-color);
}
.linkfood:hover {
color: var(--aa-color);
}
.linkculture:hover {
color: var(--aa-color);
}
/* End Navbar */
/* Start Main */
.injera-menu {
background-size: cover;
overflow: hidden;
width: 100%;
height: 10%;
display: block;
}
.ourmenutext {
position: absolute;
margin-top: -25%;
font-size: 400%;
background: -webkit-linear-gradient(#10CB00, #10CB00, #FFC701, #FF0101, #FF0101);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 3px white;
-webkit-text-stroke: 3px black;
margin-left: 3%;
}
.menuoptions {
display: flex;
width: 100%;
justify-content: center;
}
.mainoption {
margin: 2% 5%;
color: var(--aa-color);
}
.vegoption {
margin: 2% 5%;
}
.specialoption {
margin: 2% 5%;
}
.drinksoption {
margin: 2% 5%;
}
.vegoption:hover {
color: var(--aa-color)
}
.specialoption:hover {
color: var(--aa-color)
}
.drinksoption:hover {
color: var(--aa-color)
}
/* Start Menu */
.menu {
position: relative;
}
/* Start Main Menu */
.menumain {
justify-content: center;
color: var(--aa-color);
dis
}
.price {
float: right;
border: 1px solid var(--aa-color);
padding: 1% 2%;
}
.dishtitle {
margin-left: 40%;
text-decoration: underline;
}
.dishinfo {
padding: 5% 10%;
font-size: 150%;
}
.menu-item {
width: 70%;
border: 3px solid var(--aa-color);
padding: 20px;
margin-left: 15%;
margin-bottom: 5%;
box-shadow: 5px 10px 8px #888888;
justify-content: center;
}
.menuveg {
width: 100%;
justify-content: center;
color: var(--aa-color);
display: none;
}
.one-pers, .two-pers, .three-pers, .four-pers{
margin: 4% 40%;
display: flex;
}
.perstext{
width: 50%;
margin-right: 20%;
}
.persprice{
width: 50%;
float: left;
}
.menuspecial {
width: 100%;
justify-content: center;
color: var(--aa-color);
display: none;
}
.dishinfo2 {
padding: 5% 10%;
font-size: 150%;
text-decoration: none;
text-align: center;
}
/* End Menu */
/* End Main */
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Addis Abeba | Menu</title>
<link rel="stylesheet" href="/css/menu.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Menu
About Us
Our Food
Ethiopian Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- Start Main -->
<div class="our-menu">
<div class="ourmenusection">
<div class="img1">
<img src="img/injera.png" alt="injera" class="injera-menu">
</div>
<div class="text-ourmenu">
<h1 class="ourmenutext">
Menu</h1>
</div>
</div>
</div>
<div class="menuoptions">
<h2 class="mainoption">Main</h2>
<h2 class="vegoption" onclick="showveg()">Vegetarian</h2>
<h2 class="specialoption" onclick="showspecial()">Special</h2>
<h2 class="drinksoption" onclick="showspecial()">Drinks</h2>
</div>
<div class="menu">
<!-- Start Main Menu -->
<div class="menumain">
<div class="menu-item">
<div class="price">
<p>CHF 21.-</p>
</div>
<div class="dishtitle">
<h1>Key Wat</h1>
</div>
<div class="dishinfo">
Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
</div>
</div>
<div class="menu-item">
<div class="price">
<p>CHF 23.-</p>
</div>
<div class="dishtitle">
<h1>Doro Wat</h1>
</div>
<div class="dishinfo">
Chicken cooked in specially seasoned red sauce and Ethiopian butter.
</div>
</div>
<div class="menu-item">
<div class="price">
<p>CHF 23.-</p>
</div>
<div class="dishtitle">
<h1>Yebeg Wat</h1>
</div>
<div class="dishinfo">
Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
</div>
</div>
<div class="menu-item">
<div class="price">
<p>CHF 25.-</p>
</div>
<div class="dishtitle">
<h1>Kitfo</h1>
</div>
<div class="dishinfo">
Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
</div>
</div>
<div class="menu-item">
<div class="price">
<p>CHF 24.-</p>
</div>
<div class="dishtitle">
<h1>Beef Tibs</h1>
</div>
<div class="dishinfo">
Strips of beef sauteed with onion and pepper.
</div>
</div>
<div class="menu-item">
<div class="price">
<p>CHF 24.-</p>
</div>
<div class="dishtitle">
<h1>Lamb Tibs</h1>
</div>
<div class="dishinfo">
Cubes of lamb fried in buter, onions, green and black peppers.
</div>
</div>
</div>
<!-- Start Vegetarian Menu -->
<div class="menuveg">
<div class="menu-item">
<div class="price">
<p>CHF 17.-</p>
</div>
<div class="dishtitle">
<h1>Shiro</h1>
</div>
<div class="dishinfo">
Yellow split peas cooked in special sauce and blended into a puree flavored with spices.
</div>
</div>
<div class="menu-item">
<div class="price">
<p>CHF 17.-</p>
</div>
<div class="dishtitle">
<h1>Misir</h1>
</div>
<div class="dishinfo">
Cracked lentil cooked in spiced sauce.
</div>
</div>
<div class="menu-item">
<div class="price">
<p>CHF 16.-</p>
</div>
<div class="dishtitle">
<h1>Gomen</h1>
</div>
<div class="dishinfo">
Assortment of spicy chopped vegetables cooked in spiced butter, onions and various kinds of exotic peppers.
</div>
</div>
<div class="menu-item">
<div class="dishtitle" style="margin-left: 30%;">
<h1>Vegetarian Tasting Menu</h1>
</div>
<div class="pers">
<div class="one-pers">
<div class="perstext">
<h3>1 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 22.-</p>
</div>
</div>
</div>
<div class="two-pers">
<div class="perstext">
<h3>2 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 44.-</p>
</div>
</div>
</div>
<div class="three-pers">
<div class="perstext">
<h3>3 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 66.-</p>
</div>
</div>
</div>
<div class="four-pers">
<div class="perstext">
<h3>4 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 88.-</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start Special Menu -->
<div class="menuspecial">
<div class="menu-item">
<div class="dishtitle">
<h1>Addis Abeba Special</h1>
</div>
<div class="dishinfo2">
<h3>Includes:</h3>
Tibs, Yebuegue Alicha, Doro Woot and choice of Lentils or Vegetables
</div>
<div class="pers">
<div class="two-pers">
<div class="perstext">
<h3>2 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 52.-</p>
</div>
</div>
</div>
<div class="three-pers">
<div class="perstext">
<h3>3 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 78.-</p>
</div>
</div>
</div>
<div class="four-pers">
<div class="perstext">
<h3>4 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 99.-</p>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<div class="dishtitle">
<h1>Tasting Menu</h1>
</div>
<div class="dishinfo2">
<h3>Includes:</h3>
Tibs, Yebuegue Alicha, Doro Woot, Kitfo and choice of Lentils or Vegetables
</div>
<div class="pers">
<div class="two-pers">
<div class="perstext">
<h3>2 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 60.-</p>
</div>
</div>
</div>
<div class="three-pers">
<div class="perstext">
<h3>3 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 90.-</p>
</div>
</div>
</div>
<div class="four-pers">
<div class="perstext">
<h3>4 Pers</h3>
</div>
<div class="persprice">
<div class="price">
<p>CHF 115.-</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Main -->
<!-- Start JS -->
<script type="text/javascript">
function showmain() {
document.getElementsByClassName("menumain")[0].style.display = "inline-block";
document.getElementsByClassName("menuveg")[0].style.display = "none";
document.getElementsByClassName("menuspecial")[0].style.display = "none";
document.getElementsByClassName("menudrinks")[0].style.display = "none";
document.getElementsByClassName("mainoption")[0].style.color = "#57C324";
document.getElementsByClassName("vegoption")[0].style.color = "black";
document.getElementsByClassName("specialoption")[0].style.color = "black";
document.getElementsByClassName("drinksoption")[0].style.color = "black";
}
function showveg() {
document.getElementsByClassName("menumain")[0].style.display = "none";
document.getElementsByClassName("menuveg")[0].style.display = "inline-block";
document.getElementsByClassName("menuspecial")[0].style.display = "none";
document.getElementsByClassName("menudrinks")[0].style.display = "none";
document.getElementsByClassName("mainoption")[0].style.color = "black";
document.getElementsByClassName("vegoption")[0].style.color = "#57C324";
document.getElementsByClassName("specialoption")[0].style.color = "black";
document.getElementsByClassName("drinksoption")[0].style.color = "black";
}
function showspecial() {
document.getElementsByClassName("menumain")[0].style.display = "none";
document.getElementsByClassName("menuveg")[0].style.display = "none";
document.getElementsByClassName("menuspecial")[0].style.display = "inline-block";
document.getElementsByClassName("menudrinks")[0].style.display = "none";
document.getElementsByClassName("mainoption")[0].style.color = "black";
document.getElementsByClassName("vegoption")[0].style.color = "black";
document.getElementsByClassName("specialoption")[0].style.color = "#57C324";
document.getElementsByClassName("drinksoption")[0].style.color = "black";
}
function showdrinks() {
document.getElementsByClassName("menumain")[0].style.display = "none";
document.getElementsByClassName("menuveg")[0].style.display = "none";
document.getElementsByClassName("menuspecial")[0].style.display = "none";
document.getElementsByClassName("menudrinks")[0].style.display = "inline-block";
document.getElementsByClassName("mainoption")[0].style.color = "black";
document.getElementsByClassName("vegoption")[0].style.color = "black";
document.getElementsByClassName("specialoption")[0].style.color = "black";
document.getElementsByClassName("drinksoption")[0].style.color = "#57C324";
}
</script>
<!-- End JS -->
</body>
</html>
Any help is greatly appreciated.
Thank you!

If you aren't using a framework, I'd still suggest using jQuery, especially because it's very beginner friendly in my opinion.
The latest version of jQuery can be found here.
You can simply link it within your html like this:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
</head>
With jQuery, you can set events for when a object is clicked.
An example for a click event for one of your classes would be something like this:
$(".vegoption").click(function(){
// do something when .vegoption is clicked
})
If you want to change its color when clicked, you can simply call .css() to change the background-color like this:
$(".vegoption").click(function(){
$(this).css("background-color", "green");
})
If you want a certain class to be colored green when landing on the page, you can call the $(document).ready() event which is included with jQuery and calls everything within its function as soon as the page has loaded correctly.
$(document).ready(function(){
$(".mainoption").css("background-color", "green");
})
In order make sure that only one option is green at once, you can simply change the color of all the other options back to their defaults within these events as well just like explained in the examples above.

How can I resize a div according to zoom?

I am having following UI.
Everything works good when zoom is 100%. But when user zooms in the UI get disturbed and is seen as following:
The card within the div does not resize. I want all the cards to take the width of the div titled E. Setting card width to 100% is creating issue for other divs. As cards get stretched for div having with bigger than div E.
div E display once card. There may be multiple card visible on horizontal scroll. Similarly, div R shows 3 cards at once. It may contain more cards. When zooming, some content of the card visible gets hidden in div E. Similarly, the last of 3 cards in div R is also gets partially hidden.
Here is the codepen link and below the code:
#div_A {
background-color: #B14C08;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_B {
background-color: #157668;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_C {
background-color: #E61B00;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_D {
background-color: #0078D4;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_E {
background-color: #0D283D;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
.holder {
min-height: 240px;
padding: 0 2px 0 2px;
}
.holder .card_holder {
padding: 0;
max-width: 290px;
}
.holder .xyz {
overflow-x: auto;
min-height: 240px;
}
.shortdetail {
display: flex;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.content {
width: 287px;
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: 100%;
height: 80px;
padding: 0px;
border: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: white;
position: relative;
overflow: hidden;
}
.shortdetail {
margin: 5px;
flex-direction: row;
z-index: 2;
position: relative;
}
.profileinfo {
width: 100%;
margin: 0px 10px;
color: #5a5a5a;
line-height: 1.2;
font-style: initial;
}
.profileinfo .row {
margin: 0;
}
.profileinfo .col-8,
.col-4 {
padding: 0;
}
.profileinfo label {
margin-bottom: 0px;
}
.name {
font-size: 13px;
font-weight: 600;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="col-8">
<div class="row rounded-top" style="background-color :#405755; color: white; font-weight: 600;">
<span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span>
</div>
<div class="row border border-primary" style="padding: 5px 0 5px 0;">
<div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;">
<div class="col-3 holder">
<div class="rounded-top" id="div_A">
Div A <button>Prev</button> <button>Next</button>
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 holder">
<div class="rounded-top" id="div_B">
Div B
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_C">
Div C
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 holder">
<div class="rounded-top" id="div_D">
Div D
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_E">
Div E
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Do not fix width or height with px, try with % and see

Unable to obtain the id of the element using v-if

I am new to VueJS. I am developing an application using VueJS and Bootstrap. There is a div which I wish to render based on a condition.
I have been trying to use v-if on the div so that once the condition is true, the data property is set to true and the div gets displayed.
My code looks like this:
export default {
data(){
return {
detailsSectionOpen: false
}
},
methods:{
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
},
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="content" style="padding-top: 3px;">
<div class="row">
<div class="col-xl-12 col-md-6" id="show" style="padding-left: 0px;padding-right: 0px;">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">Files</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px; margin-left: 15px; ">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Recent</p>
</div>
<!-- Recently used files section begins here -->
<div class="row" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6" v-for="(file,index) in recentFiles">
<stats-card>
<div slot="header" class="header-rectangle" #contextmenu.prevent="$refs.menu.open">
<img :src="file.source" style=" height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" #contextmenu.prevent="$refs.menu.open" style="display: flex; flex-direction: column; justify-content: center;">
<div class="row" >
<div class="col-xl-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{file.name}}</span>
</div>
<div class="file-size-style" >
<span>{{file.size}} MB</span>
</div>
</div>
<div class="col-xl-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!file.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<vue-context ref="menu">
<ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-share-alt" id="context-menu-icon"></i><span class="context-menu-span">Share</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-copy" id="context-menu-icon"></i><span class="context-menu-span">Copy/Move</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='far fa-star' id="context-menu-icon"></i><span class="context-menu-span">Add to Starred</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-cloud-download-alt' id="context-menu-icon"></i><span class="context-menu-span">Download</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-pencil-alt' id="context-menu-icon"></i><span class="context-menu-span">Rename</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-tag' id="context-menu-icon"></i><span class="context-menu-span">Tags</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-trash-alt" id="context-menu-icon"></i><span class="context-menu-span">Delete</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-chart-bar" id="context-menu-icon"></i><span class="context-menu-span">Access Stats</span></li>
</ul>
</vue-context>
</div>
<!-- Folder section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Folders</p>
</div>
<div v-if="gridView === true" class="row seven-cols" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-1" id="no-padding" v-for="(folder,index) in folders">
<stats-card>
<div slot="header" :data-key="index" class="folder-rectangle" #click="folderSelected=index" :class="{'folder-selected':folderSelected==index}">
<div class="row">
<div class="col-xl-3" style="padding-right: 15px;padding-left: 15px;">
<div class="clearfix" v-if="folder.shared" style="margin-top: 8px; margin-left: 10px;">
<i class="material-icons" id="folder-image"></i>
</div>
<div class="clearfix" style="margin-top: 8px; margin-left: 10px;" v-else>
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-xl-9" style="padding-left: 7px;padding-right: 7px;padding-top: 7px;padding-bottom: 7px;">
<div class="file-name-style" style="padding-right: 5px; padding-left: 5px;">
<span>{{folder.name}}</span>
</div>
<div class="file-size-style" style="padding-bottom: 5px;padding-top: 10px;padding-left: 5px;">
<span>{{folder.numFiles}} files</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- Files section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Files</p>
</div>
<div v-if="gridView === true" class="row" style="padding-bottom: 15px; margin-bottom: 20px; padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://image.flaticon.com/icons/png/512/136/136526.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<i class="far fa-file-image" style=" height: 50px; margin-top: 50px; color:#4CAF50; font-size: 40px;"></i>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="http://www.dap.asn.au/wp-content/uploads/2017/01/pdfLogo.png" style=" height: 50px; margin-top: 50px;">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://www.cleverducks.com/wp-content/uploads/2018/01/Excel-Icon.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- List View section begins here -->
<list-view :gridView="gridView" :folders="folders">
</list-view>
</div>
</div>
<!-- File Details section begins here -->
<div v-if="detailsSectionOpen" id="details" ref="detailsSection">
<div class="content">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="pull-right">
<button class="btn" #click="closeDetailsSection">
<i class="fa fa-close">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr-details">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px;">
<p style="color: #424242;width: 239px;height: 30px;font-family: 'Source Sans Pro'; font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-align: left;">Details</p>
</div>
<div class="row">
<div class="col">
<div style="height: 100px; width: 100px; margin: 0 auto" >
<i class="fas fa-folder" style="font-size: 100px; color: #878D99"></i>
</div>
<div style="max-width: 100%;">
<ul style="list-style: none;padding-left: 20px;padding-right: 20px; padding-top: 60px;padding-bottom: 60px;" class="details-ul">
<li>Shared with: ~ 15 people</li>
<li>Name: Folder Name</li>
<li>Type: Folder</li>
<li>Files: 20</li>
<li>Location: Home</li>
<li>Owner: John</li>
<li>Created: March 10, 2018</li>
<li>Opened: March 10, 2018, 7 PM by Jenny</li>
<li>Modified: March 10, 2018, by me</li>
<li>Downloaded: March 10, 2018, by John </li>
<li>Retention Policy: None</li>
<li>Tags: Add</li>
<li>Description: Add</li>
</ul>
</div>
<div style="height: 100px; width: 100px; margin: 0 auto" >
<button class="plus-circle-btn"><i class="fa fa-plus-circle"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am able to see the div being rendered on the DOM when the method showDetails() is called.
But, when I try getting the element by its ID, the result is null. So, document.getElementById('details') returns null.
I think it has something to do with the reactivity in Vue and how v-if works. Can someone please help me resolve this issue?
Thank you!

v-if adds/removes an element from the DOM. You can't show or hide something that doesn't exist in the DOM.
Trying to hide or show another DOM element based on a different element's v-if doesn't make any sense as you could simply add another v-if="condition" and it would work the same way.
If you really can't add another check to the DOM then you should Watch the same data element in VUE that the if is watching...
Do this by adding a class as that's better for toggles since ID's are only supposed to be used once per page. You can add this class anywhere in the DOM based on the Vue state.
<div v-if="visibleCheck">
This element will be visible if visibleCheck = true
</div>
<div id="anotherElement" v-bind:class="visibleCheck ? 'isVisble' : 'notVisible'">
If visibleCheck = true this div will have a class .isVisible
If visibleCheck = false/null this div will have a class .notVisible
</div>
Then do something with those classes:
.isVisible {
display:block;
}
.notVisible {
display:none;
}
The whole point of Vue is NOT to watch the DOM for changes but to base the DOM changes on the data
Using your example:
<div id="whatever" v-bind:class="detailsSectionOpen ? 'col-xl-9' : 'col-xl-12'">
stuff
</div>

You can try using $nextTick, it will be called after the component re-render:
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
})
}
}

Organisation structure to cascade (top to bottom) divs with jscript

I am not a developer and this is my first post asking for help for a direction to what techniques should I look at first so pleas be gentle. At least I want to understand if the approach is correct for the objective.
In a final view I would like this to make an organisational structure from a database. Where each employee has at least 1 direct manager to form a tree, and his card is populated with additional data as-well.
The problem I face at the current stage, is that I don't understand how could I expand level2 divs (sub-department) both simultaneously. Without expanding other ones below.
$(document).ready(function(){
$(".level1_div").click(function(){
$(".level2_div").slideUp();
$(".level3_div").slideUp();
$(".level4_div").slideUp();
$(this).next().show("slow");
});
$(".level2_div").click(function(){
$(".level4_div").slideUp();
$(this).next().slideToggle("slow");
});
$(".level3_div").click(function(){
$(this).next().slideToggle("slow")();
});
});
.wrapper {
background-color: lightblue;
padding: 5px;
margin: auto;
display: table;
font-size: 8px;
margin-top:50px;
border:1px solid #000000;
border-radius:6px;
}
.level1_div {
color: gainsboro;
margin-top:2px;
background-color:#666666;
width:300px;
padding:1px;
border:2px solid #000000;
border-radius:4px;
position:relative;
}
.level2_div {
color: gainsboro;
width:295px;
margin-left:5px;
margin-top:2px;
margin-bottom:2px;
border:2px solid #000000;
padding:1px;
display:none;
border-radius:4px;
background-color:#666666;
}
.level3_div {
color: gainsboro;
width:290px;
margin-left:10px;
margin-top:2px;
margin-bottom:2px;
border:2px solid #000000;
padding:1px;
display:none;
border-radius:4px;
background-color:#666666;
}
.level4_div {
color: gainsboro;
width:285px;
margin-left:15px;
margin-top:2px;
margin-bottom:2px;
border:2px solid #000000;
padding:1px;
display:none;
border-radius:4px;
background-color:#666666;
}
.postitle {
color: gainsboro;
width:55%;
display:inline-block;
margin:1px;
}
.department {
color: gainsboro;
display:inline-block;
width:55%;
margin:1px;
}
.fullname {
color: gainsboro;
width:113px;
display:inline-block;
margin:1px;
float:right;
}
.category {
color: gainsboro;
width:113px;
display:inline-block;
margin:1px;
float:right;
}
.search {
color: black;
background-color:silver;
width:100px;
margin:1px;
margin-left:10%;
position:relative;
border-radius:5px;
padding: 2px;
border:0.5px solid #000000;
display:inline-block;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<!-- Start your code here -->
<div class="wrapper">
<div class="search"> Search people... </div>
<div class="search"> Search skill... </div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level3_div">
<div class="department"> Branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level4_div">
<div class="department"> Sub-branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
</div>
<!-- End yo</p>code here -->
</body>
</html>

Does this suits you?
Basically I've changed a little bit the tree structure in order to be recursive, having in the process less CSS and JS. Instead of having, .level1, .level2, .leveln classes, we now have a .node class
.node {
width: 100% !important;
padding-top: 2px;
position: relative;
}
.node-content {
color: gainsboro;
background-color: #666666;
border: 2px solid #000000;
border-radius: 4px;
width: 100%;
padding: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.node-children {
padding: 0 0 0 2px;
}
<div class="node" collapsed="true">
<div class="node-content">
Content goes here
</div>
<div class="node-children">
Nested Nodes goes here
</div>
</div>
Here is the final version
$(document).ready(function() {
$('.node[collapsed] .node').slideUp();
/**
* Instead of using:
* > $('.node').click(function...)
*
* We can use:
* > $('.wrapper').on('click', '.node', function...)
*
* This will allow any .node element inside .wrapper to listen
* to the event (event if it wasn't in the DOM when this event
* was binded)
**/
$('.wrapper').on('click', '.node', function(event) {
var $self = $(this),
$children = $self.find('> .node-children > .node'),
$neighbours = $self.parent().children('.node').not($self),
$others = $self.parent().find('.node').not($self);
if ($self.attr('collapsed')) {
$self.removeAttr('collapsed');
$others.attr('collapsed', true).not($neighbours).slideUp();
$children.show("slow");
} else {
$self.attr('collapsed', true);
$children.slideUp();
}
return false;
});
});
// IGNORE THE CODE BELLOW!! (it's just binding a button to add new .node elements to the tree)
$(document).ready(function () {
$('<button>', {
type: 'button',
text: 'Add new .node',
id: '#addNodes'
})
.prependTo('body')
.click(function () {
$('<div class="node" collapsed="true">' +
'<div class="node-content">' +
'<div class="department"> Branch </div>' +
'<div class="fullname"> Full name</div>' +
'<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>' +
'<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>' +
'</div>' +
'<div class="node-children">' +
'<div class="node" collapsed="true">' +
'<div class="node-content">' +
'<div class="department"> Sub-branch </div>' +
'<div class="fullname"> Full name</div>' +
'<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>' +
'<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>' +
'</div>' +
'<div class="node-children">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>').appendTo('.wrapper');
$('.node[collapsed] .node').hide();
});
});
.wrapper {
background-color: lightblue;
width: 300px;
padding: 5px;
margin: auto;
display: table;
font-size: 8px;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 6px;
}
.node {
width: 100% !important;
padding-top: 2px;
position: relative;
}
.node-content {
color: gainsboro;
background-color: #666666;
border: 2px solid #000000;
border-radius: 4px;
width: 100%;
padding: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.node-children {
padding: 0 0 0 2px;
}
.postitle {
color: gainsboro;
width: 55%;
display: inline-block;
margin: 1px;
}
.department {
color: gainsboro;
display: inline-block;
width: 55%;
margin: 1px;
}
.fullname {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.category {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.search {
color: black;
background-color: silver;
width: 100px;
margin: 1px;
margin-left: 10%;
position: relative;
border-radius: 5px;
padding: 2px;
border: 0.5px solid #000000;
display: inline-block;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<!-- Start your code here -->
<div class="wrapper">
<div class="search"> Search people... </div>
<div class="search"> Search skill... </div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Sub-branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

This one keeps your original structure and doesn't allow node self collapsing when clicked.
$.fn.nextAfter = function (selector) {
var i,
len,
$next = $(),
$elements = this.nextAll();
for (i = 0, len = $elements.length; i < len; i++) {
if ($elements.eq(i).filter(selector).length > 0) {
$next = $next.add($elements.eq(i));
} else {
break;
}
}
return $next;
};
$(document).ready(function() {
$(".level1_div").click(function() {
if ($(this).attr('collapsed') === 'true') {
$(".level1_div").attr('collapsed', true);
$(".level2_div").attr('collapsed', true).slideUp();
$(".level3_div").attr('collapsed', true).slideUp();
$(".level4_div").slideUp();
$(this).nextAfter('.level2_div').show("slow");
$(this).attr('collapsed', false);
}
});
$(".level2_div").click(function() {
if ($(this).attr('collapsed') === 'true') {
$(".level2_div").attr('collapsed', true);
$(".level3_div").attr('collapsed', true).slideUp();
$(".level4_div").slideUp();
$(this).nextAfter('.level3_div').show("slow");
$(this).attr('collapsed', false);
}
});
$(".level3_div").click(function() {
if ($(this).attr('collapsed') === 'true') {
$(".level3_div").attr('collapsed', true);
$(".level4_div").slideUp();
$(this).nextAfter('.level4_div').show("slow");
$(this).attr('collapsed', false);
}
});
});
.wrapper {
background-color: lightblue;
padding: 5px;
margin: auto;
display: table;
font-size: 8px;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 6px;
}
.level1_div {
color: gainsboro;
margin-top: 2px;
background-color: #666666;
width: 300px;
padding: 1px;
border: 2px solid #000000;
border-radius: 4px;
position: relative;
}
.level2_div {
color: gainsboro;
width: 295px;
margin-left: 5px;
margin-top: 2px;
margin-bottom: 2px;
border: 2px solid #000000;
padding: 1px;
display: none;
border-radius: 4px;
background-color: #666666;
}
.level3_div {
color: gainsboro;
width: 290px;
margin-left: 10px;
margin-top: 2px;
margin-bottom: 2px;
border: 2px solid #000000;
padding: 1px;
display: none;
border-radius: 4px;
background-color: #666666;
}
.level4_div {
color: gainsboro;
width: 285px;
margin-left: 15px;
margin-top: 2px;
margin-bottom: 2px;
border: 2px solid #000000;
padding: 1px;
display: none;
border-radius: 4px;
background-color: #666666;
}
.postitle {
color: gainsboro;
width: 55%;
display: inline-block;
margin: 1px;
}
.department {
color: gainsboro;
display: inline-block;
width: 55%;
margin: 1px;
}
.fullname {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.category {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.search {
color: black;
background-color: silver;
width: 100px;
margin: 1px;
margin-left: 10%;
position: relative;
border-radius: 5px;
padding: 2px;
border: 0.5px solid #000000;
display: inline-block;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<!-- Start your code here -->
<div class="wrapper">
<div class="search"> Search people... </div>
<div class="search"> Search skill... </div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level3_div" collapsed="true">
<div class="department"> Branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level4_div" collapsed="true">
<div class="department"> Sub-branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
</div>
<!-- End yo</p>code here -->
</body>
</html>

Categories