I have been following various tutorials / guides online as of how to create a responsive header, and I have finally been able to complete it except in the sense that I can't make it open. Whenever I click the fa-bars, absolutely nothing happens...
HTML:
<header id="header" class="main-header">
<div class="container">
<h1 class="header-logo navigation-hover">Logo</h1>
<i class="iconbars fa fa-bars" aria-hidden="true"></i>
<nav class="nav" id="nav">
<ul class="links" id="links">
<li class="active navigation-hover">
Home
</li>
<li class="navigation-hover">
About
</li>
<li class="navigation-hover">
Services
</li>
<li class="last navigation-hover">
Contact
</li>
</ul>
</nav>
</div>
</header>
CSS (sorry if it's long):
* {
margin: 0;
padding: 0;
}
#header {
top: 0;
z-index: 2;
position: fixed;
width: 100%;
height: 50px;
background: #f2f2f2;
color: #535a60;
border-bottom: 2px solid #999;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.header-logo {
padding: 0px 5px;
line-height: 50px;
margin: 0px;
font-size: 1.2em;
float: left;
}
.header-logo a {
font-family: "Lato", sans-serif;
text-decoration: none;
color: #535a60;
}
#nav {
float: right;
right: 0;
height: 50px;
}
#nav ul {
width: 100%;
display: inline-block;
top: 0;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
font-family: "Roboto", sans-serif;
line-height: 50px;
text-transform: uppercase;
height: 50px;
display: inline-block;
color: #535a60;
text-decoration: none;
padding: 0 20px;
font-size: 15px;
}
Jquery:
$(function () {
var pagewidth = $(window).width(),
links = $("#links"),
linksBtn = $("#linksBtn"),
icon = $("#linksBtn .iconbars");
if (pagewidth < 700) {
links.hide();
icon.addClass("fa-bars");
}
$("#linksBtn .iconbars").click(function(e) {
$("#links").slideToggle();
icon.toggleClass("fa-bars");
icon.toggleClass("fa-times");
});
$(window).on('resize', function () {
if ($(this).width() > 700) {
links.show();
icon.addClass("fa-times");
icon.removeClass("fa-bars");
} else {
links.hide();
icon.addClass("fa-bars");
icon.removeClass("fa-times");
}
})
});
You can only have one id on an element
try:
<i class="iconbars fa fa-bars" aria-hidden="true"></i>
$("#linksBtn").click(function() {
$("#links").slideToggle();
icon.toggleClass("fa-bars");
icon.toggleClass("fa-times");
});
Related
I want to make an adaptive menu. The problem now is that in the desktop version, when you click on a menu item and its sub-items, it closes, and should only work while I am hovering over it. And in the mobile version with an adaptive less than 520px, it also closes when you click on a sub-menu item, and this is bad.
I need hover to work only in desktop version. Also I need a menu to not get closed after the click on the sub-items.
That also goes for mobile version.
$('.drop__down-menu').on('click', function(){
$(this).children('.drop__down-list').slideToggle();
});
.header__menu-inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.menu__header {
max-width: 750px;
}
.menu__header li {
display: inline-block;
}
.menu__header li + li {
margin-left: 30px;
}
.menu__header a {
font-size: 15px;
line-height: 42px;
text-transform: uppercase;
font-weight: 500;
color: #333;
}
.menu__header a:hover {
color: blue;
}
.drop__down-menu {
position: relative;
padding-bottom: 20px;
margin-top: 20px;
}
.drop__down-list {
display: none;
position: absolute;
top: 61px;
left: 0;
width: 270px;
background-color: #fff;
padding: 20px;
border-top: 1px solid blue;
color: #fff;
font-size: 15px;
box-shadow: 0px 5px 40px 0px rgba(82, 85, 90, 0.2);
border-top: 1px solid blue;
z-index: 2;
}
.drop__down-list li {
width: 100%;
}
.drop__down-list li + li {
margin-left: 0;
}
.drop__down-list li a {
display: block;
line-height: 44px;
padding: 0 10px;
text-transform: capitalize;
}
.drop__down-list li a:hover {
color: #fff;
background-color: blue;
}
.drop__down-menu:hover .drop__down-list {
display: block;
}
#media (max-width: 520px) {
.header__user-nav + .header__user-nav {
margin-left: 5px;
}
.menu__header {
margin-left: auto;
}
.menu__header a {
line-height: 30px;
}
.menu__header-btn {
width: 30px;
}
.menu__header-btn span {
height: 4px;
}
.menu__header-btn span + span {
margin-top: 3px;
}
.menu__header-list {
left: 0;
top: 56px;
}
.menu__header-list li {
display: block;
border-bottom: 1px solid #0c0c0c;
}
.menu__header-list li a {
display: block;
}
.menu__header li + li {
margin-left: 0;
}
.drop__down-list {
width: 100%;
}
.header__menu-inner {
min-height: 55px;
}
.drop__down-list {
padding: 0 12px;
top: 40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrap">
<div class="content">
<header class="header">
<div class="header__menu-inner">
<nav class="menu__header">
<div class="menu__header-btn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu__header-list">
<li class="drop__down-menu">
Home
<ul class="drop__down-list">
<li>Home One Multi User</li>
<li>Home Two Single User</li>
<li>Home Three Product</li>
</ul>
</li>
<li class="drop__down-menu">
All products
<ul class="drop__down-list">
<li>Recent Items</li>
<li>Popular Items</li>
<li>Featured Items</li>
</ul>
</li>
<li class="drop__down-menu">
Wordpress
<ul class="drop__down-list">
<li>Popular Items</li>
<li>Admin Templates</li>
<li>Blog / Magazine / News</li>
</ul>
</li>
<li>Festures</li>
<li class="drop__down-menu link__mega-menu">
<a class="drop__down-link" href="#">Pages</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I hope this answer helps you!
#media (min-width: 520px){
.drop__down-menu:hover .drop__down-list {
display: block;
}
I think you should adapt CSS style for mobile first.
then add #media (min-width: x) for large devices not inversely
I am working on a E-learning shiny web application which lets students learn R functions easily. The user should be able to drag and drop grids into the blanks provided to answer a particular question syntactically. I have written the HTML file, including the styling and javascript in it. I have used the includeHTML("index.html") function to include the HTML file to the ui.R part of the application. Now, I need to implement communication between the ui.R and server.R in such a way that when the user drags and drops all the grids in the desired blanks and clicks the "Submit" button, the concatenated version of the function needs to go to the server side, R interpreter needs to evaluate the statement and then send back the output which needs to be displayed to the user. How do I send the concatenated message from webpage to server.R? Evaluate the function? And how do I send back the output back to the web page?
Example: Q. Write a function in R for sum of two digits:
sum, diff, mean, median, etc
1,2,3,4,5...
( ) . , / : " ' { } [ ] ( )
My HTML, CSS and Javascript file is as follows:
E-learning 'R' The function for sum of any two digits in 'R' syntax is:
span { width: 50px; display: inline-block; height: 20px; background: #ffffff; }
body {
font: 13px Verdana;
background-color: grey;
}
ul.numbers {
list-style: none;
padding: 10px;
background: grey;
}
ul.symbols {
list-style: none;
padding: 10px;
background: grey;
}
ul.functions {
list-style: none;
padding: 10px;
background: grey;
}
ul.numbers li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FFF706;
}
ul.symbols li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #18FC7A;
}
ul.functions li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FF99F7;
}
p {
padding: 10px;
color: black;
background-color: #0680FF;
}
answer span{
width: 100px;
}
.quiz-wrapper {
position: relative;
display: block;
width: 510px;
height: 450px;
}
.quiz-wrapper p.question-description {
background: #19286C;
color: white;
padding: 25px 20px;
}
.quiz-wrapper ul.options {
position: relative;
display: inline-block;
vertical-align: top;
width: 165px;
list-style: none;
border: 1px solid #19286C;
text-align: center;
padding: 0;
margin: 0;
}
.quiz-wrapper ul.options li {
border: 1px solid transparent;
padding: 6px 8px;
}
.quiz-wrapper ul.options li.title {
background: #19286C;
color: white;
}
.quiz-wrapper ul.options li.option {
display: block;
position: relative;
z-index: 50;
font-size: 13px;
}
.quiz-wrapper .answers {
display: inline-block;
width: 335px;
font-size: 13px;
line-height: 20px;
}
.quiz-wrapper .answers .target {
display: inline-block;
width: 110px;
background: lightblue;
margin: 0 3px;
text-align: center;
}
.quiz-wrapper button[type="submit"] {
display: block;
position: relative;
margin: 10px auto;
padding: 10px;
background: #19286C;
border: none;
color: white;
font-size: 16px;
}
.lightbox-bg {
display: none;
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.status {
display: none;
position: absolute;
z-index: 110;
text-align: center;
width: 80%;
top: 220px;
left: 47px;
}
.status p {
background: white;
padding: 30px;
}
<body>
<ul class="numbers">
<li class="number" data-target="wrong1">0</li>
<li class="number" data-target="wrong2">1</li>
<li class="number" data-target="right3">2</li>
<li class="number" data-target="right5">3</li>
<li class="number" data-target="wrong3">4</li>
<li class="number" data-target="wrong4">5</li>
<li class="number" data-target="wrong5">6</li>
<li class="number" data-target="wrong6">7</li>
<li class="number" data-target="wrong7">8</li>
<li class="number" data-target="wrong8">9</li>
</ul>
<ul class="functions">
<li class="function" data-target="right1">sum</li>
<li class="function" data-target="wrong9">median</li>
<li class="function" data-target="wrong10">mean</li>
<li class="function" data-target="wrong11">sqrt</li>
<li class="function" data-target="wrong12">log</li>
<li class="function" data-target="wrong13">min</li>
<li class="function" data-target="wrong14">max</li>
<li class="function" data-target="wrong15">abs</li>
<li class="function" data-target="wrong16">round</li>
<li class="function" data-target="wrong17">add</li>
</ul>
<ul class="symbols">
<li class="symbol" data-target="right2">(</li>
<li class="symbol" data-target="right6">)</li>
<li class="symbol" data-target="right4">,</li>
<li class="symbol" data-target="wrong18">.</li>
<li class="symbol" data-target="wrong19">/</li>
<li class="symbol" data-target="wrong20">?</li>
<li class="symbol" data-target="wrong21">+</li>
<li class="symbol" data-target="wrong22">=</li>
<li class="symbol" data-target="wrong23">-</li>
<li class="symbol" data-target="wrong24">*</li>
</ul>
<p id="answer">Message is: <span id = "display"></span> </p>
<script>
$(document).ready(function() {
$("span").droppable({
accept: "ul > li",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var dragedElement = ui.draggable.text();
$(this).addClass("ui-state-highlight");
$(this).html(dragedElement);
$(this).addClass('matched');
}
});
$("ul li").draggable({
helper:"clone",
revert: "invalid"
});
})
</script>
ui.R:
library(shiny)
shinyUI(fluidPage(
includeHTML("index.html")
))
server.R:
library(shiny)
shinyServer(function(input, output) {
observeEvent(input$res){
eval(res);
print(res);
}
})
I am using this example on my application.
https://codepen.io/kushalpandya/pen/IAhin/
Button is appearing perfectly on the screen. I place div section and all css acordingly. Now when I click on arrow button don't know why options are not showing.
My Split button is not working.
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
Did I placed <Script> tag correctly.
also you need to add css! check this:
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
.container {
text-align: center;
}
.container > h2 {
text-align: center;
}
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #444;
text-decoration: none;
}
.x-button-drop-menu li a:hover {
background: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
I have a simple website with a simple navigation bar, but it seems like a very daunting task after much research.
When hovering over any of the buttons, it will display a dropdown to show more options.
I have got that working fine, but how would I go about making the dropdown stay when I hover over the contents of the dropdown?
Basically when the cursor leaves the navigation's bar button and onto the dropdown menu, it doesn't disappear.
I read that it's possible with jQuery, but I want to do it in JavaScript alone if it's possible, even if it's lengthy.
The navbar's hover itself works, but whatever I tried to keep the dropdown there when hovering on it, keeps bugging everything out.
This is the code I have, and that I have tried:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").className += "animated fadeIn";
};
function serverMouseOut() {
document.getElementById("serverdropdownbox").className += "animated fadeOut";
};
document.getElementById("serverdropdownbox").onmouseover = function() {
serverDropdownMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
serverDropdownMouseOut()
};
function serverDropdownMouseOver() {
document.getElementById("serverdropdownbox").style.opacity = "1";
};
function serverDropdownMouseOut() {
document.getElementById("serverdropdownbox").style.opacity = "0";
};
#navbarbox
{
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar, #navbar ul
{
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span
{
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox
{
display: block;
opacity: 0;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#serverdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
background-color: white;
}
#server
{
background-color: blue;
}
#communitydropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#communitydropdowncontent
{
list-style-type: none;
width: 19.7vw;
margin: 1vw 0 0 26vw;
}
#communitydropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#community
{
background-color: brown;
}
#storedropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#storedropdowncontent
{
list-style-type: none;
width: 13.6vw;
margin: 1vw 0 0 45.65vw;
}
#storedropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#store
{
background-color: blue;
}
#downloadsdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#downloadsdropdowncontent
{
list-style-type: none;
width: 19.8vw;
margin: 1vw 0 0 59.2vw;
}
#downloadsdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#downloads
{
background-color: brown;
}
#contactdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#contactdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 78.9vw;
}
#contactdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#contact
{
background-color: blue;
}
.animated
{
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<body>
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li id="serverdropdownli">Server List</li>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
<div id="communitydropdownbox">
<ul id="communitydropdowncontent">
<li>Events</li>
<li></li>
</ul>
</div>
<div id="storedropdownbox">
<ul id="storedropdowncontent">
<li>Credits</li>
<li>Items</li>
<li>VIP</li>
</ul>
</div>
<div id="downloadsdropdownbox">
<ul id="downloadsdropdowncontent">
<li>TF2</li>
<li>CS:GO</li>
<li>Minecraft</li>
</ul>
</div>
<div id="contactdropdownbox">
<ul id="contactdropdowncontent">
<li>Contact Us</li>
<li>Staff</li>
<li>Steam Group</li>
<li>Appeal Ban</li>
<li>Links</li>
</ul>
</div>
First of all - your HTML structure is invalid. ul tag can have only li as direct child, not a. So ul > a > li must be replaced to ul > li > a.
Second - you don't need JS for such simple menu. Have ul > li > ul as sub-menu and use :hover on ul > li to show your sub-menu.
ul {
padding: 0;
}
li {
white-space: nowrap;
list-style: none;
}
#menu > li {
position: relative;
display: inline-block;
}
#menu > li > ul {
position: absolute;
left: 0;
top: 100%;
min-width: 100%;
opacity: 0;
transition: opacity 200ms ease-in-out;
}
#menu > li:hover > ul {
opacity: 1;
}
<ul id="menu">
<li>Home</li>
<li>
<span>Servers</span>
<ul>
<li>Server 1</li>
<li>Server 2</li>
<li>Server 3</li>
</ul>
</li>
</ul>
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)