jQuery .show working but not .hide when using slideToggle - javascript

I am using jQuery for multiple toggling menus on my site. However, if I change it's initial loading from .show to .hide it will not work.
My js file is:
jQuery(document).ready(function($) {
$('div ul.menu').hide();
$('h2.trigger').click(function() {
$(this).toggleClass("active").next().slideToggle('slow');
return false;
});
});
And my html for my multiple menus is like so:
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>
Any ideas why this will not work?

Simply get rid of your extra div tag. Your next() is picking that instead of the ul.menu you are trying to target. Like so:
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>
<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>
You will also need to modify the following line
$('div ul.menu').hide();
to leave out the div
$('ul.menu').hide();
Note: the reason that this appears to work with .show() is that your div is shown by default so the fact that the .show() is being called on the wrong item goes unnoticed.

Related

Close hamburger menu on click

I'm looking for a way to make this hamburger menu close after the user clicks the link/makes selection. I've checked out several options on how to do it, but with no luck. I understand I need a missing piece of JS.
The rest of the code (html&css) can be found here (https://codepen.io/alvarotrigo/pen/oNGzoYd). Stackoverflow is prohibiting me from posting all of the code (says it's mostly code).
function menuOnClick() {
document.getElementById("menu-bar").classList.toggle("change");
document.getElementById("nav").classList.toggle("change");
document.getElementById("menu-bg").classList.toggle("change-bg");
}
You forgot to pass in the onclick function to the nav.
This should do the trick:
<div id="menu">
<div id="menu-bar" onclick="menuOnClick()">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<nav class="nav" id="nav" onclick="menuOnClick()">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
<div class="menu-bg" id="menu-bg"></div>
In your HTML, just call the same menuOnClick() function on every <li> item on the list.
<li onclick="menuOnClick()">Home</li>
<li onclick="menuOnClick()">About</li>
<li onclick="menuOnClick()">Contact</li>
<li onclick="menuOnClick()">Blog</li>

How to hide or show the desired block when clicking on an element?

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.
Site ct03638.tmweb.ru
Code jsfiddle.net/qhfs7jmb/
.invisible{
display: none;
}
.visible {
display: block;
}
<section class="services" id="services">
<div class="services-info-bg"></div>
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="services-info">
<div class="content">
<div class="business-card invisible">Сайт-визитка</div>
<div class="landin invisible">Landing page</div>
<div class="market">
<div class="services-info-title">
Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
</div>
<p>Что входит в нашу работу:</p>
<div class="services-info-block">
<ul>
<li>+ Подготовка технического задания</li>
<li>+ Разработка прототипа</li>
<li>+ Верстка макета</li>
<li>+ Интеграция дизайна</li>
</ul>
<ul>
<li>+ Написание уникальных текстов</li>
<li>+ Сбор семантики</li>
<li>+ Тестирование и запуск</li>
<li>+ Подключение веб-аналитики</li>
</ul>
</div>
<div class="services-info-footer">
<a class="order" href="#">Сделать заказ</a>
Узнать подробнее →
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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');
});
.invisible{
display: none;
}
.visible {
display: block;
}
<section class="services" id="services">
<div class="services-info-bg"></div>
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="services-info">
<div class="content">
<div class="business-card invisible">Сайт-визитка</div>
<div class="landing invisible">Landing page</div>
<div class="market">
<div class="services-info-title">
Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
</div>
<p>Что входит в нашу работу:</p>
<div class="services-info-block">
<ul>
<li>+ Подготовка технического задания</li>
<li>+ Разработка прототипа</li>
<li>+ Верстка макета</li>
<li>+ Интеграция дизайна</li>
</ul>
<ul>
<li>+ Написание уникальных текстов</li>
<li>+ Сбор семантики</li>
<li>+ Тестирование и запуск</li>
<li>+ Подключение веб-аналитики</li>
</ul>
</div>
<div class="services-info-footer">
<a class="order" href="#">Сделать заказ</a>
Узнать подробнее →
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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);
.services-info .content > div
{
display: none;
}
body[show="business-card"] .business-card,
body[show="landing"] .landing,
body[show="market"] .market,
body[show="corp"] .corp,
body[show="bitrix"] .bitrix,
body[show="advertising"] .advertising,
body[show="seo"] .seo,
body[show="promotion"] .promotion,
body[show="marketing"] .marketing
{
display: block;
}
<section class="services" id="services">
<div class="services-info-bg"></div>
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="services-info">
<div class="content">
<div class="business-card invisible">Сайт-визитка</div>
<div class="landing invisible">Landing page</div>
<div class="market">
<div class="services-info-title">
Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
</div>
<p>Что входит в нашу работу:</p>
<div class="services-info-block">
<ul>
<li>+ Подготовка технического задания</li>
<li>+ Разработка прототипа</li>
<li>+ Верстка макета</li>
<li>+ Интеграция дизайна</li>
</ul>
<ul>
<li>+ Написание уникальных текстов</li>
<li>+ Сбор семантики</li>
<li>+ Тестирование и запуск</li>
<li>+ Подключение веб-аналитики</li>
</ul>
</div>
<div class="services-info-footer">
<a class="order" href="#">Сделать заказ</a>
Узнать подробнее →
</div>
</div>
</div>
</div>
</div>
</div>
</section>

How to fix SlickNav not initliazing

I have a website where I installed SlickNav. I have it calling properly, and the linking works properly, however it doesn't seem to want to initialize in the site itself. I'm calling it via the following:
<link rel="stylesheet" href="/wp-content/themes/mta360/dist/styles/slicknav.css" />
<script src="/wp-content/themes/mta360/dist/scripts/slicknav.js"></script>
The menu code is as follows:
<header>
<!-- Header Start -->
<div class="header-area">
<div class="main-header ">
<div class="header-top top-bg d-none d-lg-block">
<div class="container">
<div class="col-xl-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="header-info-left">
<ul>
<li>1234567890</li>
<li>mta360seo#gmail.com</li>
</ul>
</div>
<div class="header-info-right">
<ul>
<li>Mon - Fri: 9:00 - 5:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom header-sticky">
<div class="container">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-2 col-lg-1 col-md-1">
<div class="logo">
<img src="/logo.png" alt="">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8">
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Heating</li>
<li>Cooling</li>
<li>Press
<ul class="submenu">
<li>Blog</li>
<li>Releases</li>
</ul>
</li>
<li>Company
<ul class="submenu">
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-3">
<!-- Header-btn -->
<div class="header-btn d-none d-lg-block">
Quote
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
Is there something I'm missing? It works for my local testing, but when I compile and try to use it on the actual site, it just doesn't want to initialize at all. Is there something I'm missing?
It's a wordpress site using Sage 9, in case that helps with the diagnosis.
You have to initialize it using Javascript code.
The 2 first libraries you are calling are the CSS slicknav library and the JS slicknav library. You also need to load jQuery for slicknav to work.
So add this to your code at the beginning:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
$(document).ready(function(){
$('#menu').slicknav({
// Label for menu button.
// Use an empty string for no label.
'label' : 'MENU',
// If true, the mobile menu is a copy of the original.
'duplicate': true,
// The duration of the sliding animation.
'duration': true,
// other parameters see here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html //
});
});
also you need to specify an ID "menu" to the <ul> element like this:
<ul id="menu">
<li>...</li>
</ul>
Finally, make sure your HTML markup follows the specified structure for slick nav which is:
<ul id="menu">
<li>Home
<ul>
<li>Blog</li>
<li>Plugins
<ul>
<li>Latest</li>
<li>Most Popular</li>
<li>Recommended</li>
</ul>
</li>
<li>Publishing</li>
</ul>
</li>
<li>Top <a href="#">Menu 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
more here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html

Delete Node of HTML by JS

Trying to delete specific Node of HTML.
First HTML:
There many List in .widget-content want to delete all .list without First Li. Means keep first-child.
<div class="wrapper delete">
<div class="widget-content">
<ul>
<li class="lists">
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
</ul>
</div>
</div>
Second HTML:
Want to delete ul of .widget-content ul if .wrapper has class delete. Condition need.
<div class="wrapper delete">
<div class="widget-content">
<ul> <!-- Delete This -->
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
</ul>
</div>
</div>
How to do this by JS/jquery? Fiddle example would be helpful.
$(document).ready(function () {
$('.widget-content li').not(':first-child').remove();
if ($(".wrapper").hasClass('delete')) {
$('.widget-content ul').remove();
}
});
slice can be used to select elements with a start and end.
$('.widget-content li.lists').slice(1).remove();
$('.wrapper.delete ul').remove();

How to hide a div when another div is empty

I'm new to jQuery and I've hit a bit of a snag.
Here is my HTML:
<div id="mainpage-tabs-area">
<ul class="nav cf">
<li class="tb-one">BTN1</li>
<li class="tb-two">BTN2</li>
<li class="tb-three">BTN3</li>
<li class="tb-four">BTN4</li>
</ul>
<div class="list-wrap">
<ul id="description">
<li>Hello, I am a description</li>
</ul>
<ul id="tabtwo" class="hide">
<li></li>
</ul>
<ul id="tabthree" class="hide">
<li></li>
</ul>
<ul id="tabfour" class="hide">
<li></li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs -->
And here is my current jQuery:
$(document).ready(function () {
var tabContent = $('ul.list-wrap').find('li').text();
if ($.trim(tabContent) === "") {
$('ul.nav li').hide();
}
});
What I want to be able to do is just the jQuery to check every li in .list-wrap and if that li is empty then remove the corresponding li in .nav as this is for a tab system where if no content is entered, they don't want it displaying.
Any suggestions for a newbie?
Nick
I'd iterate through the list items, check the length of each node's text, and hide the corresponding tab with:
$('.list-wrap li').each(function(i){
if(!$(this).text().length) $('#mainpage-tabs-area li').eq(i).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainpage-tabs-area">
<ul class="nav cf">
<li class="tb-one">BTN1
</li>
<li class="tb-two">BTN2
</li>
<li class="tb-three">BTN3
</li>
<li class="tb-four">BTN4
</li>
</ul>
<div class="list-wrap">
<ul id="description">
<li>Hello, I am a description</li>
</ul>
<ul id="tabtwo" class="hide">
<li></li>
</ul>
<ul id="tabthree" class="hide">
<li></li>
</ul>
<ul id="tabfour" class="hide">
<li></li>
</ul>
</div>
<!-- END List Wrap -->
</div>
<!-- END Organic Tabs -->
The i in the each() function is the index of the element that the loop is on, and that allows you to target the corresponding tab element and hide it.
This should do the job:
$('.list-wrap ul li').each(function(){
var cnt = $('.list-wrap ul li').index( $(this) );
var txt = $(this).text();
if ($.trim(txt)==''){
$('.nav li').eq(cnt).hide();
}
});
jsFiddle Demo
I would suggest this If you are not making infinite lists
$('.tb-two').hide(); //if tabtwo is empty
$('.tb-hree').hide(); //if tabthree is empty
and so on...

Categories