Lets say I have the following menu structure. I have 3 problems with it.
$('.parent ul').hide();
var current_parent;
$(document).delegate('.parent', 'click', (function() {
var $this = $(this);
if(current_parent !== undefined) {
current_parent.find('ul').slideUp();
}
current_parent = $this;
// Check if the element is visble or not
if(!$this.find('ul').is(':visible')) {
$this.find('ul').slideDown();
} else {
$this.find('ul').slideUp();
}
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="parent">menu item1
<ul>
<li class="child">Sub menu item1</li>
<li class="child parent">Sub menu item2
<ul>
<li class="child">Sub-sub menu item1</li>
</ul>
</li>
</ul>
</li>
<li class="parent">menu item2
<ul>
<li class="child">Sub menu item3</li>
</ul>
</li>
</ul>
When you click on menu item 1 the Sub-sub menu item1 is also
opened. How can this be prefented?;
When you click on Sub menu item2 the menu item1 is also closed. How can this be prefented?.
How can I make this more dynamic so that when I add deeper menu items the menu still works but without having to add things like: $('ul ul ul').slideDown(); etc.?
Could anyone help me with these problems?
Thanks in advance
You can create a drop drop down menu with jquery
I have given individual HTML, CSS and JQuery code, use it and try to understand it.
There is an outer <div id="navigation"> and inside it their is annow in it everyis main menu item andin everyis sub menu item. Furthermore you can create sub menu in sub menu also by creatingin`.
$(document).ready(function () {
$("li").click(function () {
var x = $(this).children("a:first").attr("href");
if (x != undefined)
window.location.href = x;
});
$("#nav li").hover(function () {
$(this).find("ul:first").css({
visibility: "visible",
display: "none",
}).slideDown(400);
}, function () {
$(this).find("ul:first").css({ visibility: "hidden" });
});
});
body {
font-family: Calibri, Verdana;
font-size: 16px;
color: white;
}
a {
color: inherit;
text-decoration: none;
}
#navigation {
height: 40px;
}
#nav {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ul {
list-style: none;
margin: 10px 0px 0px -5px;
padding: 0px;
display: none;
}
#nav li {
float: left;
width: 150px;
height: 30px;
padding: 10px 0px 0px 5px;
border: 0px solid transparent;
border-right-width: 1px;
border-right-color: gray;
background-color: #6397CB;
}
#nav li ul li {
width: 145px;
height: 22px;
padding: 10px 0px 8px 10px;
border: 0px solid transparent;
border-top-width: 1px;
border-top-color: gray;
}
#nav li ul li ul {
position: relative;
top: -40px;
margin-left: 145px;
color: white;
}
#nav li ul li ul li {
border: 0px solid transparent;
border-left-width: 1px;
border-left-color: gray;
border-top-width: 1px;
border-top-color: gray;
}
#nav li:hover {
background-color: lightgray;
cursor: pointer;
}
#nav li ul li:hover {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
<ul id="nav">
<li>My Name</li>
<li>About U
<ul>
<li>How U?
<ul>
<li>Your Extras</li>
</ul>
</li>
<li>Howz U?</li>
</ul>
</li>
<li>More</li>
</ul>
</div>
Related
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 3 years ago.
How to change + to - when menu parent menu item is clicked. i was looking to target ::after element using jquery but i cant find way to target pseudo element using jquery
I want to change below css to when perent menu is clicked
.ir-nav-w > ul li::after {
/* padding-left: 10px; */
text-transform: uppercase;
content: "-";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
Fiddle code
$(".nav-w > ul > li > a").click(function() {
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
// compare url with nav url to show active url
$(function() {
//var url = window.location.href;
var url = window.location.pathname;
var pgurl = window.location.href.substr(
window.location.href.lastIndexOf("/") + 1
);
$(".nav-w ul li a").each(function() {
if ($(this).attr("href") == url || $(this).attr("href") == "") {
$(this).addClass("active-menu");
}
});
console.log("url : " + window.location.pathname);
});
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul {
margin-left: 0px;
list-style-type: none;
margin-bottom: 0px;
}
.nav-w ul li {
/*padding-left: 10px;*/
text-transform: uppercase;
position: relative;
width: 100%;
}
/* ol inside content area*/
.nav-w>ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul>li ul {
padding-left: 0px;
padding-right: 0px;
display: none;
}
.active-menu {
color: red !important;
}
.nav-w>ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w>ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left: 45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li>Investement Calculator</li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>
The way I would do it is to add a class to the parent menu after it is clicked, such as open.
And then in your css you could add a special modifier:
.nav-w > ul li.open::after {
content: "-"
}
And when it is click again, remove the class open.
You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new ::after specified.
Add this to your code:
// JS
const $listItems = $('.ir-nav-w > ul li');
$listItems.onClick(
$listItems.removeClass('closed');
this.addClass('closed')
);
// CSS
.ir-nav-w > ul li.closed::after {
content: "+";
}
Trick is to add css:
.nav-w > ul li.selected::after {
content: "-";
}
and toggle selected class on click:
$(".nav-w > ul > li > a").click(function () {
$(this).parent().toggleClass("selected");
$(this).next().slideToggle();
});
$(".nav-w > ul > li > a").click(function () {
$(this).parent().toggleClass("selected");
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul{
margin-left: 0px;
list-style-type:none;
margin-bottom:0px;
}
.nav-w ul li{
/*padding-left: 10px;*/
text-transform:uppercase;
position:relative;
width:100%;
}
/* ol inside content area*/
.nav-w > ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul > li ul {
padding-left: 0px;
padding-right: 0px;
display:none;
}
.active-menu {
color: red !important;
}
.nav-w > ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w > ul li.selected::after {
content: "-";
}
.nav-w > ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left:45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li><a href="/investor-relations/share-nformations/investor-calculator/" >Investement Calculator</a></li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>
It's not actually possible to target :after, because it isn't part of the DOM and can't be accessed through JavaScript code. This isn't a jQuery limitation.
You could just set a class on the element itself, and change the :after rule when the class is set, i.e.:
.nav-w > ul li.active::after
{
content: "-"
}
Add active class to the anchors' parent:
$(".nav-w > ul > li a").click(function () {
$(this).next().slideToggle();
$(this).parent().toggleClass('active');
});
And replace ::after on the active class:
.nav-w > ul li.active::after {
content: '-'
}
You can do with :after prop.
You can do something like this
.li-item::after{
content: "+";
}
.li-item-minus::after{
content: "-" !important;
}
While in jQuery - you can toggle class .li-item-minus on click of each list item
jQuery(".naw-v ul li").on("click", function(){
jQuery(this).toggleClass("li-item-minus");
});
Which means - on click of this li element, you toggleClass li-item-minus which has different content form main one.
I'm trying to get this to work for all elements using the class-name '.sub-menu-parent', but I can only get it to work for the first instance of it.
I have tried using a for loop with the index of parentClass, but it doesn't seem to work. Same goes with the '.sub-menu-child' class.
HTML
<nav>
<div class="row">
<img src="resources/img/logos/HTH_Logo_1_2.png" alt="A logo that says 'hearts that heal'" class="logo">
<ul class="main-nav">
<li>Home</li>
<li>About Us <i class="ion-android-arrow-dropdown"></i>
<ul class="drop-down-main sub-menu--child">
<li>Who We Are</li>
<li>Mission Statement</li>
<li>Vision Statement</li>
<li>Our Values</li>
<li>Goals</li>
<li>Objectives</li>
</ul>
</li>
<li>Photo Gallery <i class="ion-android-arrow-dropdown"></i>
<ul class="drop-down-main sub-menu--child">
<li>Group Photos</li>
<li>Retreat Photos</li>
<li>Members Photos</li>
<li>Honorary Members Photos</li>
<li>Our Beloved Children</li>
<li>Activities and Sponsorship Photos</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS
/* ----- MAIN NAV ----- */
.main-nav {
float: right;
list-style-type: none;
margin-top: 32.5px;
}
.main-nav li {
display: inline;
text-align: center;
}
.main-nav li a:link,
.main-nav li a:visited {
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-weight: 400;
font-size: 80%;
background-color: #c95a6c; /* #484066 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-nav li a:hover,
.main-nav li a:active {
background-color: #fff;
color: #c95a6c;
}
/* ----- For colors ----- */
.main-nav-color:focus {
color: #c95a6c !important;
background-color: #fff !important; /* #484066 */
}
/* ----- NESTED NAV ----- */
.drop-down-main {
position: absolute;
z-index: 9990;
background-color: #fff;
display: none;
margin-top: 5px;
border: 1px solid #484066;
border-top: none;
}
.show {
display: block;
}
.drop-down-main li {
display: block;
text-align: left;
border-bottom: 1px solid #484066;
width: 100%;
}
.drop-down-main li a:link,
.drop-down-main li a:visited {
display: block;
text-decoration: none;
color: #c95a6c;
font-weight: 400;
font-size: 80%;
background: none; /* #484066 */
border-radius: 0;
padding: 5px 24px 5px 5px;
}
.drop-down-main li:hover,
.drop-down-main li:active {
background-color: #c95a6c;
}
.drop-down-main li a:hover,
.drop-down-main li a:active {
color: #fff;
}
.drop-down-main li:first-child {
margin-top: 10px;
border-top: 1px solid #484066;
}
.drop-down-main li:last-child {
border: none;
}
Javascript
var menuToggle = (function() {
var DOMstrings = {
displayToggle: 'show',
dropParent: '.sub-menu--parent',
dropChild: '.sub-menu--child',
colorToggle: 'main-nav-color',
};
var parentClass = document.querySelector(DOMstrings.dropParent);
var childClass = document.querySelector(DOMstrings.dropChild);
parentClass.addEventListener('click', toggleDropdown, false);
function toggleDropdown() {
childClass.classList.toggle(DOMstrings.displayToggle);
parentClass.classList.toggle(DOMstrings.colorToggle);
};
window.addEventListener('click', function(event) {
if(event.target !== parentClass && event.target.parentNode !== parentClass) {
childClass.classList.remove(DOMstrings.displayToggle);
parentClass.classList.remove(DOMstrings.colorToggle);
}
});
})();
I have also tried using querySelectorAll but it seems you can't use classList Methods with it.
You should use querySelectorAll
Based from this answer: Add event listener to DOM elements based on class
document.querySelector('.class-name'); Will only select the first element having class='class-name'.
For adding event listener to all such elements, use querySelectorAll()
And then update the code where you attach the listener.
var parentClasses = document.querySelectorAll(DOMstrings.dropParent);
for (var i = 0; i < parentClasses.length; i++) {
parentClasses[i].addEventListener('click', setupEventListener(parentClasses[i]), false);
}
function setupEventListener(element){
return function(){
toggleDropdown(element);
}
}
function toggleDropdown(element) {
// since `ul` is a sibling of `a`
element.nextElementSibling.classList.toggle(DOMstrings.displayToggle);
element.classList.toggle(DOMstrings.colorToggle);
};
I believe this should work for your current implementation, however this doesn't include code for toggling the display off.
I am having some issue getting a menu to .hide() after clicking on an element.
$(document).on("click", "div.dropdown", function() {
$(this).find("ul").show(0, function() {
$(this).find("li").click(function() {
var a = $(this).html();
$(this).parent().parent().find(".dropdown-title p").html(a);
$(this).parent().hide(); //Onclick won't hide the UL
});
$(this).mouseleave(function() {
$(this).hide();
});
});
return false;
});
div.dropdown {
margin: 0 20px 0 0;
float: left;
border-radius: 3px;
background: rgba(0, 0, 0, .1);
height: 50px;
line-height: 50px;
color: #999;
text-transform: uppercase;
position: relative;
}
div.dropdown div.dropdown-title {
padding: 0 20px;
display: inline-block;
cursor: pointer;
}
div.dropdown div.dropdown-title p {
margin: 0 20px 0 0;
float: left;
font-size: 12px;
}
div.dropdown div.dropdown-title span {
float: left;
}
div.dropdown ul {
position: absolute;
top: 50px;
left: 0;
width: 200px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 0 0 3px 3px;
z-index: 1001;
border: 1px solid #ccc;
list-style-type: none;
padding: 0;
margin: 0;
}
div.dropdown ul li {
line-height: 32px;
background: #fff;
color: #999;
font-size: 12px;
white-space: nowrap;
text-transform: uppercase;
padding: 0 20px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<div class="dropdown-title">
<p>Sort By</p>
<span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</div>
<ul style="display: none;">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
</ul>
</div>
I am attempting to get the dropdown menu (the ul element) to .hide() when you click on one of the li elements in the menu, as well as when you mouseleave from the ul. Right now, just the mouseleave portion works and not when you click on one of the li elements. I am unsure of what I am overlooking, so if you see any errors or issue please let me know.
Here's the link to my fiddle
When clicking on the li the event propagating to the ul, so what really happens that the click on the li closing the list but the 'click' on the ul opens it again, you can stop the event propagation
$(document).on("click", "div.dropdown", function() {
$(this).find("ul").show(0, function() {
$(this).find("li").click(function(event) {
event.stopPropagation();
var a = $(this).html();
$(this).parent().parent().find(".dropdown-title p").html(a);
$(this).parent().hide(); //Onclick won't hide the UL
});
$(this).mouseleave(function() {
$(this).hide();
});
});
return false;
});
I have a horizontal responsive menu that works great, here is link to the page with it
I tried to make a new one with dropdown menus but can't get it to work. Instead of having a dropdown appear on hover, it shows the menus automatically in the line below. Here is link to codepen showing the errors http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li>Home
</li>
<li>Accomodations
</li>
<li>Amenities
</li>
<li>Rates
</li>
<li>Links
<ul>
<li>Dropwdown 1
</li>
<li>Dropdown 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Your javascript code has lots of unclosed line endings - you are missing the semicolons quiet often.
Additionally, jQuery will apply nav ul to all elements it finds. Meaning if there is a second occurrence, which is the case in your case, it will be applied to that too.
Instead: you should give your level 0 menu a clean, identifiable class, which you can preciesly target:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
and then in your jQuery:
$('.mother-of-all-dropdown-lists').slideToggle();
Sorry, that I keep writing, there are jQuery selectors wrong as well:
The id / hashtag is missing, so..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
should be:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();
Newbie in JS / jQuery here.
First problem: When page is loading or it is refreshing whole sub-sub menus are blinked for like 0.5sec so they can "hide". I have put the script firstly on the end of "body" tag, but after this blink I've put it in "head" so is there any way to make it actually hide, like really hide, to not be shown when page is on load?
Second problem is when I'm clicking on either blue or green square menu is not sliding smoothly. It's like a bounce effect. Is it because of "hide"? And last problem is with slideDown function. Where shall I use slideUp to make it go back to the position where it hides?
jQuery(document).ready(function($)
{
$(".raid ul").hide();
$(".raid").hide();
$(".wod").one("click", function()
{
$(".wod ul li").slideDown(200);
});
$(".mop").one("click", function()
{
$(".mop ul li").slideDown(200);
});
$(".hfc").click(function()
{
$(".hfc").addClass('x');
$(".hfc ul").slideToggle(200);
});
$(".soo").click(function()
{
$(".soo ul").slideToggle(200);
});
});
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#progress
{
padding: 0;
float: left;
width: 200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
box-shadow: 2px 2px 2px 0px black;
background-repeat: no-repeat;
}
h1
{
margin-top: 8px;
border-bottom: 4px solid #00c99a;
padding-bottom: 4px;
}
.expansion
{
text-align-last: center;
width: inherit;
height: 108px;
}
.expansion:first-child
{
margin-top: -20px;
}
.mop, .wod
{
width: inherit;
height: inherit;
}
.wod > ul
{
margin-top: 90px;
}
.mop > ul
{
margin-top: 90px;
}
.wod
{
border-bottom: 5px solid black;
background-color: blue;
}
.mop
{
border-bottom: 5px solid black;
background-color: green;
}
.raid > ul
{
padding-bottom: 10px;
}
h3
{
font-size: 20px;
padding: 10px 0 10px 0;
}
.nhm
{
display: inline-block;
text-align: center;
padding: 4px 20px 1px 20px;
border: 2px solid white;
border-radius: 50px;
cursor: default;
color: white;
font-weight: 300;
}
.hfc-progress, .soo-progress,
{
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
cursor: default;
color: white;
}
.hfc, .soo
{
color: limegreen;
background-color: rgba(37, 65, 23, 0.5);
}
.hfc:hover, .soo:hover
{
cursor: pointer;
color: greenyellow;
}
.x
{
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="progress"><h1>Progress</h1>
<div id="expansion">
<ul>
<li class="expansion wod"><br />
<ul>
<li class="raid hfc"><h3>Hellfire Citadel ↓</h3>
<ul>
<li class="hfc-progress">Hellfire Assault
<ul>
<li class="nhm hfcn">N</li>
<li class="nhm hfch">H</li>
<li class="nhm hfcm">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expansion mop"><br />
<ul>
<li class="raid soo"><h3>Siege of Orgrimmar↓</h3>
<ul>
<li class="soo-progress">Immerseus
<ul>
<li class="nhm soon">N</li>
<li class="nhm sooh">H</li>
<li class="nhm soom">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
If you really want the elements hidden, use CSS. The CSS can have properties like
.raid ul {
display: none;
}
.raid {
display: none;
}
instead of calling the hide() function in jQuery. This way, if you include the CSS in the head section and keep your JS in the bottom, the blink would not happen (because the browser would keep them hidden by default)