Add an event listener to the sidebar <ul> to listen for clicks on the sidebar elements.
When the user clicks on a sidebar element the event listener looks for the ID of the clicked element and uses that to construct a query selector to select the required content <div>.
Then add the invisible class and remove the ‘visible’ class on all the content <div>, and finally set the ‘visible’ class on the required content <div>
You could just search for the visible content block and change that, but past experience has taught me to hide everything I don’t want, regardless.
The code you need shoud be enclosed within <script> tags and added to the foot of your page.
document.querySelector('ul.sidebar-menu').addEventListener('click',function(e){
e.preventDefault();
// The <a> element was clicked, but we need the ID from the enclosing <li> element
let clickedId = e.target.closest('li').id;
// Set all the content elements to invisible (saves trying to find the visible one)
let contentDivs = document.querySelectorAll('div.services-info>div.content>div');
contentDivs.forEach((el)=>{el.classList.remove('visible'); el.classList.add('invisible')});
// Now, using the ID from the <li>, create a query selector to find the content <div>
let targetSelector = 'div.services-info>div.content>div.'+clickedId;
// Set that element visible
document.querySelector(targetSelector).classList.add('visible');
});
One method is to set an attribute with selected menu item id on body element and in CSS show the element with the same class name.
The section that you want to show when clicked menu item must have the same class name as the id of <li> item:
const menu = document.querySelectorAll(".sidebar-menu li > a"),
onClick = e =>
{
e.preventDefault();
//get ID from <li> element and add to the body "show" attribute
document.body.setAttribute("show", e.target.parentNode.id);
};
for(let i = 0; i < menu.length; i++)
menu[i].addEventListener("click", onClick);
I have a list-menu .sidebar-menu and each li of this list has its own id. There is also a .services-info block, where blocks are located, one of which should appear when you click on one of the items in the .sidebar-menu that corresponds to this block. On the blocks in .services-info, I hung the .invisible class, which hides them and there is a .visible class with the display: block property.
Question: How to make it so that when you click on one of the .sidebar-menu items, the corresponding block appears and the unnecessary one disappears? For example, I clicked on the “Business card site” item and in .services-info (circled in red in the picture) the corresponding block appears (with the .business-card class) and the previous block disappears, or I clicked on the “Online store” item and it appears also the corresponding block (with class .market). and unnecessary disappears.
Comment posted by Javascript show/hide div onclick
It seems that you left out your JavaScript. Does this answer your question?
Comment posted by Outif
this is a good solution, but for some reason it does not work for me and I also need the first element to be displayed, and they are all hidden here, and if you put display: block, then it will not disappear when other blocks are active
Comment posted by showdev
Not sure what you mean, since there are several different solutions in that post. However, you could edit your question and show us what you tried and what specifically goes wrong.
Comment posted by Outif
Did I understand the logic of the code correctly? 1) Add an event listener to ul.sidebar-menu to listen for clicks on list items. 2) In the variable clickedId, enclose the id of the parent of the clicked element 3) in the variable contentDivs we wrap all the blocks in .services-info .content
Comment posted by Outif
4) for contentDivs, the forEach method is launched, where, iterating over each element, it removes the visible class and adds invisible 5) targetSelector = ‘div.servicesinfo> div.content> div.’ + ClickedId. Here I do not understand what is written. Is there a search for a match of the block class name inside .services-info .content with the identifier of the pressed “li” in .sidebar-menu and if they match, then the block becomes visible?
Comment posted by Tangentially Perpendicular
@Outif You have it right, and you have understood the logic at 5) correctly. The query selectors are more involved than they might be because you’ve used classes almost everywhere, so the selectors have to be very specific on class. The format of the selector searches for children rather than descendant. This is a more specific search. If the classes
Comment posted by Outif
Another question – why does the code stop working if ‘e’ is removed in function (e) and e.preventDefault () is removed inside the function?
Comment posted by Outif
So I understood correctly that in the variable targetSelector compares the id of the pressed li and the class inside the .content block? And if they are similar in name, then the desired block becomes visible?
Comment posted by Outif
Did I understand the logic of the code correctly? 1) in the const variable we add all the links that are inside the .sidebar-menu li 2) when you click on one of the ‘li’, an event occurs 3) using document.body.setAttribute (“show”, e.target.parentNode.id) add the attribute “show”, which is written in advance body [show = “business-card”] .business-card, body [show = “landing”] .landing etc., where the value of “show” is the id of the pressed li in the .sidebar-menu li, right? That is, body [show = “id of the pressed element li”] .business-card.
Comment posted by Outif
4) Using e.target.parentNode.id we get the id of the clicked .sidebar-menu li, namely: e.target is a link to the object that was clicked, parentNode.id returns the id of the parent of the element that was clicked. Tying it all together it turns out that when I click on the link, I get the id of the li that I clicked on, right? Since the link is inside li. 5) I run the “for” loop inside which every link inside the .sidebar-menu li is checked if there is a click. Questions: Is it possible to get the id of the pressed .sidebar-menu li via document.getElementById ()?
Comment posted by vanowm
Yes, you dissected it pretty well, except for 5) – it doesn’t check for clicks, it register a click event listener, which fires when the link is clicked. Technically with this method you don’t really need the
