It should display content which is selected and rest hidden
I want to hide the li-related content available on the page and show one as default. The rest of the content should be shown when selected. So i want to display the content selected by user from li's. I want a javascript syntax for this. So please help me out from this situation.
They content when the list items are selected is to short. That because it an example
const toggleButtons = document.querySelectorAll('.toggleButton');
toggleButtons.forEach( toggleButton => {
toggleButton.addEventListener( 'click', () => {
removeactiveClasses()
toggleButton.classList.add('active')
})
})
function removeactiveClasses() {
toggleButtons.forEach( toggleButton => {
toggleButton.classList.remove('active')
})
}.Selectproperties {
width: 100%;
text-align: center;
}
.Selectproperties h2 {
font-size: 20px;
font-family: rubik;
font-weight: 600;
color: black;
letter-spacing: 1px;
/*background-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;*/
}
.ListProperties {
width: 80%;
display: flex;
flex-wrap: nowrap;
background-color: whitesmoke;
margin: auto;
padding: 2px;
border-radius: 1.5em;
font-size: 20px;
margin-bottom: 10px;
}
.toggleButton {
width: 20%;
font-size: 14px;
font-family: rubik;
flex: 1;
flex-basis: 150px;
border-radius: 1.5em;
padding: 8px 1px;
text-align: center;
list-style: none;
cursor: auto;
transition: all 0.3s ease;
cursor: pointer;
}
.toggleButton.active {
background-color: #ff3333;
box-shadow: 1px 1px 1px grey;
color: white;
border: 0.5px solid red;
}<div class="Selectproperties" id="Selectproperties">
<h2>Properties</h2>
<ul class="ListProperties" id="ListProperties">
<li class="toggleButton active" id="Direction">Flex Direction</li>
<li class="toggleButton">Justify Content</li>
<li class="toggleButton">Align Items</li>
<li class="toggleButton">Flex Wrap</li>
</ul>
</div>
<div class="Flex-direction">This is Flex-direction </div>
<div class="Justify Content">This is Justify Content</div>
<div class="Align Items">This is Align Items </div>
<div class="Flex Wrap">This is Flex Wrap </div>What you need to do exactly is 2 things
first to add a show/hide classes to the content
second to add a relation between the toggle buttons and the content
Let's break it down here
we will add two classes to css to either show or hide the content
.content {
display: none;
}
.active-content {
display: block;
}
now let's add the content class to all the divs with the first one set to active
<div class="Flex-direction content active-content">This is
Flex-direction </div>
<div class="Justify-content content">This is Justify
Content</div>
<div class="Align Items content">This is Align Items </div>
<div class="Flex Wrap content">This is Flex Wrap </div>
Then we need the connection between toggle buttons and content and here we can use data-id and id attributes
The data attribute allows you to store extra information on an html element you can find more about it in here
In our case we need to store the id of the content in its according toggle button so for example if we gave the first content an id of 'direction' then we need to store this id somewhere in the first toggle button like so:
<li class="toggleButton active" data-id="direction">Flex Direction</li>
....
<div class="Flex-direction content active-content" id="direction">This is Flex-direction </div>
Now inside javascript when we loop over the toggle buttons we need to
- store the current clicked button's id in a variable
- get the content of this id (with getElementById)
- add an active-content class to the content we got in the previous step
- remove all active-content classes from other elements
And here's a working example
const toggleButtons = document.querySelectorAll(".toggleButton");
const content = document.querySelectorAll(".content");
toggleButtons.forEach((toggleButton) => {
toggleButton.addEventListener("click", (e) => {
// here we get the id of the clicked button
const id = e.target.dataset.id;
// what we need to do is showing the content of this id
// and hiding the content that has an id !== of the targetted one
content.forEach((text) => {
text.classList.remove("active-content");
});
const targettedText = document.getElementById(id);
targettedText.classList.add("active-content");
removeactiveClasses();
toggleButton.classList.add("active");
});
});
function removeactiveClasses() {
toggleButtons.forEach((toggleButton) => {
toggleButton.classList.remove("active");
});
}.Selectproperties {
width: 100%;
text-align: center;
}
.Selectproperties h2 {
font-size: 20px;
font-family: rubik;
font-weight: 600;
color: black;
letter-spacing: 1px;
/*background-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;*/
}
.ListProperties {
width: 80%;
display: flex;
flex-wrap: nowrap;
background-color: whitesmoke;
margin: auto;
padding: 2px;
border-radius: 1.5em;
font-size: 20px;
margin-bottom: 10px;
}
.toggleButton {
width: 20%;
font-size: 14px;
font-family: rubik;
flex: 1;
flex-basis: 150px;
border-radius: 1.5em;
padding: 8px 1px;
text-align: center;
list-style: none;
cursor: auto;
transition: all 0.3s ease;
cursor: pointer;
}
.toggleButton.active {
background-color: #ff3333;
box-shadow: 1px 1px 1px grey;
color: white;
border: 0.5px solid red;
}
.content {
display: none;
}
.active-content {
display: block;
}<div class="Selectproperties" id="Selectproperties">
<h2>Properties</h2>
<ul class="ListProperties" id="ListProperties">
<li class="toggleButton active" data-id="direction">Flex Direction</li>
<li class="toggleButton" data-id="justify-content">Justify Content</li>
<li class="toggleButton" data-id="align-items">Align Items</li>
<li class="toggleButton" data-id="flex-wrap">Flex Wrap</li>
</ul>
</div>
<div class="Flex-direction content active-content" id="direction">This is Flex-direction </div>
<div class="Justify-content content" id="justify-content">This is Justify Content</div>
<div class="Align Items content" id="align-items">This is Align Items </div>
<div class="Flex Wrap content" id="flex-wrap">This is Flex Wrap </div>