Hiding div element - javascript

The operations-box is my div element in html i want to have hidden when the website is open and display it after click the Show more button.
'use strict';
const btnGhost = document.querySelector('.btn-ghost');
const operationsBox = document.querySelector('.operations-box');
const init = function () {
operationsBox.classList.add('hidden');
}
init();
btnGhost.addEventListener('click', function () {
operationsBox.classList.remove('hidden');
});
.hidden {
display: none;
}
<header>
<nav>
<div class="row">
<ul class="main-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</nav>
<div class="main-text-box">
<h1 class="main-welcoming-text"><span style="color: #fff">Cars menagement</span><br>Operate your cars collection</h1>
<a class="btn btn-full" href="#">About me</a>
<a class="btn btn-ghost" href="#">Show more</a>
</div>
<div class="operations-box"></div>
</header>
The result after opening website is like that: (this white box is my operations-box which should be hidden). Can anybody explain what is wrong with my code and what can i change to let it works?

If the init() function is only adding this class to element and is always performed whenever script is loaded then you don't need it.
Simply add class hidden to operations-box like in example below.
'use strict';
const btnGhost = document.querySelector('.btn-ghost');
const operationsBox = document.querySelector('.operations-box');
btnGhost.addEventListener('click', function () {
operationsBox.classList.remove('hidden');
});
.hidden {
display: none;
}
<header>
<nav>
<div class="row">
<ul class="main-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</nav>
<div class="main-text-box">
<h1 class="main-welcoming-text"><span style="color: #fff">Cars menagement</span><br>Operate your cars collection</h1>
<a class="btn btn-full" href="#">About me</a>
<a class="btn btn-ghost" href="#">Show more</a>
</div>
<div class="operations-box hidden"></div>
</header>

Do this
Give it an id in html like this
<div class="operations-box" id="operations"></div>
In CSS do this
.operations-box:{
display:none
}
in JS do this:
myDiv = document.getElementById('operations')
create a functoin to change display like this:
function showDiv(){
myDiv.display = 'inherit'
}
and lastly call this function showDiv() on click event of button you want to imply this functionality like his.
<button onclick='showDiv()'>Click Me!</button>

Related

My (hidden) tab doesn't want to open when clicking on the hamburger button

I am having trouble with my responsive navbar, I've hidden the inside-menu(li's) and want it to open when I click on the menu(hamburger) but it's not working. Can someone please help me?
const menuButton = document.getElementById('menu-button');
const insideMenu = document.getElementById('inside-menu');
menuButton.addEventListener('click', () => {
insideMenu.classList.menuButton('active');
});
<div class="nav-bar">
<div class="menu" id="menu-button">
<a href="#" class="Menu">
<img src="menu.png" alt="menu"></a>
<ul id="inside-menu">
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
Classlit has methods: add(), remove(), replace(), and toggle().
classList.menuButton does not exist, that's where the error comes from.
To solve your problem you can use the toggle() method like this:
const menuButton = document.getElementById('menu-button');
const insideMenu = document.getElementById('inside-menu');
menuButton.addEventListener('click', () => {
insideMenu.classList.toggle('hidden');
});
.hidden {
visibility: hidden;
}
<div class="nav-bar">
<div class="menu" id="menu-button">
<a href="#" class="Menu">
<img src="menu.png" alt="menu"></a>
<ul id="inside-menu" class="hidden">
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>

Can't open dropdown menu using querySelectorAll

I have a mobile navigation with two dropdown menus. Here is the markup of the nav:
<div id="mobile-menu" class="mobile-menu container fixed">
<ul>
<li>Home</li>
<li class="dropdown">
Articles <i class="bi bi-chevron-down"></i>
<ul class="submenu hidden">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">
My account <i class="bi bi-chevron-down"></i>
<ul class="submenu hidden">
<li>Dashboard</li>
<li>Profile</li>
</ul>
</li>
</ul>
</div>
The dropdown menus should open/expand when clicked. Originally I grabbed the dropdown and submnenu classes like this:
const mobileDropdown = document.querySelector(".dropdown");
const mobileSubMenu = document.querySelector('.submenu');
and used an eventlistener to toggle the "hidden" class which is just a display:none
mobileDropdown.addEventListener('click', () => {
mobileSubMenu.classList.toggle('hidden');
});
The problem with this is that this will only open the first dropdown menu and I cannot open the second.
When I try to use querySelectorAll instead of just querySelector then i get thiserror:
Uncaught typeError addEventListener is not a function
Here I read that with querySelectorAll I need to use a for or foreach loop.
but i think I'm messing it up. I tried this:
const mobileDropdown = document.querySelectorAll(".dropdown");
const mobileSubMenu = document.querySelector('.submenu');
mobileDropdown.forEach(md => md.addEventListener('click', () => {
mobileSubMenu.classList.toggle('hidden');
}));
Now I don't get an error, I can open the first dropdown menu, but when I try to open the second dropdown menu, the first one opens. What am I doing wrong? Thanks in advance.
The problem in your code is that each mobileDropdown's clickEvent was linked to the first submenu, you should link mobileDropdown's clickEvents to their submenu children like that
document.querySelectorAll(".dropdown").forEach(md => md.addEventListener('click', () => {
md.querySelector(".submenu").classList.toggle('hidden');
}));
.hidden {
visibility: hidden;
}
<div class="mobile-menu container fixed" id="mobile-menu">
<ul>
<li>Home</li>
<li class="dropdown">
Articles <i class="bi bi-chevron-down"></i>
<ul class="submenu hidden">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">
My account <i class="bi bi-chevron-down"></i>
<ul class="submenu hidden">
<li>Dashboard</li>
<li>Profile</li>
</ul>
</li>
</ul>
</div>
here is a solution. You have to listen to the 'click' event for "submenu" on the element of "dropdown".
const mobileDropdown = document.querySelectorAll(".dropdown");
mobileDropdown.forEach((md) => {
md.addEventListener("click", () => {
const mobileSubMenu = md.querySelector(".submenu");
mobileSubMenu.classList.toggle("hidden");
});
});
mobileSubMenu always the first!

JS: how can I select a child in event.target?

I have a nested megu menu like this:
<ul class="nav-wrap">
<li class="main-nav">
<a>m1</a>
<ul class="sub-nav">
<li></li>
...
<li><ul>...</ul><li>
</ul>
<li>
<li class="main-nav">
<a>m1</a>
<ul class="sub-nav"></ul>
<li>
<li class="main-nav">
<a>m1</a>
<ul class="sub-nav"></ul>
<li>
...
</ul>
for each main-nav, I want hover main-nav, and add .show class in .sub-nav (its child).
how can I do that?
I try this:
var dropdownMenus = [].slice.call(document.querySelectorAll('.main-nav'));
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
dropdownToggleEl.onmouseover= function(e){
e.target.children.querySelector('ul.sub-nav').classList.toggle('show');
};
dropdownToggleEl.onmouseleave= function(e){
e.target.children.querySelector('ul.sub-nav').classList.toggle('show');
};
});
But I get this error:
net::ERR_CERT_DATE_INVALID
Uncaught TypeError: e.target.children.querySelector is not a function at HTMLLIElement.dropdownToggleEl.onmouseover
There is code missing in multiple places in JS, HTML and CSS, I've added the missing pieces. Use onmouseenter instead of onmouseover as it always provides the same element on which you added the event listener for e.target while same is not true for onmouseover.
let dropdownElementList = [].slice.call(document.querySelectorAll('.main-nav'));
dropdownElementList.map(function (dropdownToggleEl) {
dropdownToggleEl.onmouseenter= function(e){
e.target.querySelector('ul.sub-nav').classList.remove('hide');
e.target.querySelector('ul.sub-nav').classList.add('show');
};
dropdownToggleEl.onmouseleave= function(e){
e.target.querySelector('ul.sub-nav').classList.remove('show');
e.target.querySelector('ul.sub-nav').classList.add('hide');
};
});
.show {
display: block;
}
.hide {
display: none
}
<ul class="nav-wrap">
<li class="main-nav">
<a>m111</a>
<ul class="sub-nav hide">
<li>m1.s11</li>
<li>m1.s22</li>
<li><ul>...</ul></li>
</ul>
</li>
<li class="main-nav">
<a>m122</a>
<ul class="sub-nav hide">
<li>m2.s11</li>
<li>m2.s22</li>
</ul>
</li>
<li class="main-nav">
<a>m133</a>
<ul class="sub-nav"></ul>
</li>
...
</ul>

How to fecth ID property of LI element under a div tag

I am new to CSS and JQUERY. I want to get all the ids of the LI elements in string under in a JS file to parse further.
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>
I tried below solution but its returning the object and not able to convert it into String
var columns = [];
$(#editSortable+ ' ul.sortable-list').each(function(){
columns.push($(this).sortable('toArray').join(','));
});
Kindly suggest.
var columns = [];
$('#editSortable .sortable-list li').each((i, li) => columns.push(li.id))
console.log(columns)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>

Javascript toggle menu -issue with sub-menues

I'm working on a responsive menu for a quite complex website. The horizontal menu collapses to a vertical one for smaller screens and I've used javascript to toggle the sub-menu items open/closed when clicked.The product section is the only sub-menu that has another sub-menu a level deeper and it's not quite working for it as only the third level items close again on click, but not the parent item.
Here's the code
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
And the javascript :
if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
$('li.nav-list_item').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
}
I think it might be because when the parent item (products) is clicked the ul close as specified in the javascript but the nav-title items (Purpose/ Series) are still open and can't be closed. I've been trying to work this out but just can't get it to work that when the title items are being clicked the third level menu closes and when the parent item(Products) is clicked the title items close. Any suggestions?
First off, I do not know how to debug your code as what you provided is not a working example. Head over to Codepen and create a pen where we can reproduce the issues.
Apart from that it is possible to implement the navigation with css only using hidden radio buttons or active states.
$('li.nav-list_item a, .nav-title').on('click', function(e){
e.preventDefault();
var el = $(this);
el.parent().siblings().find('> .dropdown:visible, > ul:visible').toggle();
el.parent().find('> .dropdown, > ul').toggle();
});
#nav-list .nav-list_item {
display: block;
}
#nav-list .nav-list_item .dropdown{
display: none;
}
#nav-list .nav-list_item .dropdown .drop-section ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I added Fiddle for you. Also next time better add fiddle for other developer to help you more quickly.

Categories

Resources