Develop Reference

Dropdown menu doesn't dropdown on hover

<li className={styles.link + " " + styles.hideOnMobile}>
<div className={styles.dropdownMenu}>
<button className={styles.dropbtn}>Product</button>
<div className={styles.dropdownContent}>
<a
href="#"
onClick={this._trackClick.bind(this, "header")}
>
Link 1
</a>
<a
href="#"
onClick={this._trackClick.bind(this, "header")}
>
Link 2
</a>
</div>
</div>
</li>
.dropdownMenu {
position: relative;
display: inline-block;
}
.dropbtn {
padding: 14px 16px;
font-size: 16px;
border: none;
outline: none;
margin: 0;
&:hover{
background-color: $color-active-dark;
cursor: pointer;
}
}
.dropdownContent {
display: none;
position: absolute;
background-color: $color-active-dark;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
&:hover {
display: block;
cursor: pointer;
}
a {
float: none;
text-align: left;
padding: 12px 16px;
text-decoration: none;
display: block;
&:hover{
background-color: $color-active-dark;
cursor: pointer;
}
}
}
This is my code, currently it doesn't seem to change the display to block when I hover over it and I'm not sure why. It is suppose to be a dropdown menu on top nav bar where when I hover, Link 1 and Link 2 is suppose to dropdown, but right now when I hover, the product button changes color. I'm pretty new at front-end, so any help is appreciated.

Add an extra line (extra selector) to your css to open submenu on hover. In plain css:
.dropdownContent:hover,
.dropbtn:hover + div {
display: block;
cursor: pointer;
}
You asked for the dropdown on the hover trigger. This is not the "toggle" mechanism for touchscreen because that has to be done with Javascript.
update
Your other question: How to toggle (open/close on click) the dropdown?
<script>
var Buttons = document.querySelectorAll(".dropbtn");
for (var i = 0; i < Buttons.length; i++) {
Buttons[i].addEventListener("click", function(event) {
var Divs = document.querySelectorAll(".dropdownContent");
var Shown = (this.nextElementSibling.classList.contains("show"));
for (var j = 0; j < Divs.length; j++) Divs[j].classList.remove("show");
if (Shown) this.nextElementSibling.classList.remove("show");
else this.nextElementSibling.classList.add("show");
});
}
</script>
with the following extra css at the end of your current nav css
.dropdownContent {
display: none;
}
.dropdownContent.show {
display: block;
}
Ofcourse this Javascript will open only one dropdown at a time if you have a navigation with multiple <li class="link hideOnMobile"> items.

how to run javascript function 'live' without refresh?

im trying to make a average grade calculator, now thats is going fine but now i want to calculate the average immediately when a number gets inputted in one of the fields. I've been trying this with "on(), live(), onkeyup()" but can't get it to work.
The result of the average now displays beneath the inputfields 'onclick' on the button. I want the average displayed there but then as soon as you input numbers in one of the fields it should show there as it now does after the onclick.
What i've tryed with the 'on(), live(), onkeyup()' is to connect them to the input fields and connect them to the calculator() function.
Is there a easy way to do this or a other certain way?
greetings.
function calculator() {
var weight = 0;
var mark = 0;
var weights = document.querySelectorAll('[id^=weight-]');
var grades = document.querySelectorAll('[id^=mark-]');
var trs = document.getElementsByTagName('tr');
var tBody = document.getElementsByTagName('tbody')[0];
var totalWeight = 0;
var totalGrade = 0;
for (var i = 0; i < weights.length; i++) {
totalWeight += +weights[i].value;
}
for (var i = 0; i < grades.length; i++) {
totalGrade += +grades[i].value;
}
var finalGrade=totalGrade/totalWeight;
var display = document.getElementById('output-div');
var newTr = document.createElement('TR');
newTr.innerHTML = `<td><input id="weight-${trs.length + 1}" type="text" size=2 value=""></td><td><input id="mark-${trs.length + 1}" type="text" size=2 value=""></td>`;
tBody.appendChild(newTr);
display.innerHTML='Je gemiddelde is: ' +finalGrade.toFixed(2);
}
html {
background-color: ;
}
header {
background-color: ;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
}
table {
margin: auto;
}
tr {
background-color: ;
}
td {
background-color: ;
}
#table-title {
font-size: 20px;
font-style: italic;
text-align: center;
position: relative;
}
input {
text-align: center;
}
[id^="mark"] {
width: 100px;
}
[id^="weight"] {
width: 100px;
}
#calc-btn-div {
position: relative;
width: 150px;
margin: auto;
}
#calc-btn {
position: relative;
padding: 5px;
margin-top: 20px;
}
#calc-btn:hover {
border-color: black;
box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
/* #add-input-div {
height: 50px;
text-align: center;
width: 300px;
margin: auto;
margin-top: 20px;
}
#add-input-btn {
position: relative;
padding: 5px;
margin-top: 20px;
}
#add-input-btn:hover {
border-color: black;
box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
} */
#output-div {
background-color: ;
height: 50px;
text-align: center;
width: 300px;
margin: auto;
margin-top: 20px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<header>
<h2>Gemiddelde cijfer</h2>
<h3>Voer hieronder je cijfers in</h3>
</header>
<body>
<table id="table">
<tr id="table-title">
<td>Weging</td>
<td>Cijfer</td>
</tr>
<tr>
<td><input id="weight-1" type="text" size=2 value=""></td>
<td><input id="mark-1" type="text" size=2 value=""></td>
</tr>
</table>
<div id="calc-btn-div">
<input id="calc-btn" type="button" value="Berekenen je gemiddelde" onclick="calculator()">
</div>
<!-- <div id="add-input-div">
<input id="add-input-btn" type="button" value="Voeg cijfer toe" onclick="addInput()">
</div> -->
<div id="output-div"></div>
</body>
</html>

Using vanilla JavaScript I would attach an eventListener to the inputfields like this
document.getElementById('weight-1').addEventListener('change',function(){
calculator();
});
document.getElementById('mark-1').addEventListener('change',function(){
calculator();
});
These addEventListener functions adds listeners to the "input" field's predefined 'change'-events, and fires the calculator(); function from your code.
Seeing that you are using some sort of dynamic generation of the inputfields, you could add the listeners to your inputfields using the same querySelector that you use to target them during calculation. It would mean replacing getElementById('weight-1') in my example above with querySelectorAll('[id^=weight-]') for the weight-fields.
Also, doing work with values, IO, and calculation between html and JavaScript, I would suggest using a library like jQuery. jQuery simplifies these processes a lot.
This is the documentation for the jQuery alternative onClick function:
https://api.jquery.com/change/

I think you could do that with an angularJS module. Take a look at this tutorial : https://www.w3schools.com/angular/angular_modules.asp
maybe it will help.

HTML / Javascript - try to have page pointers as guidance

I am trying to get this small tutorial to show up the first few 5 seconds pointing to the menu bar on visiting the webpage. Anyone can tell me how I can do that with HTML CSS or Javascript?
I circled it with red of what I wanted on the image.
should I use an icon
how do I get it to point to specific point on the web page

One and easy solution is to create an overlay, which will cover the whole page. The purpose of the overlay will than catch the user click, and will destroy itself and also the tooltip.
To create the tooltip just specify the target element, for the tooltip should be created, the easiest way is to use css selector and jQuery.
With jQuery you can than find the target element on the page, get its position and size and according to that create the tooltip element as well.
Here is quick example (also as a fiddle https://jsfiddle.net/2c0q91np/):
$(function() {
// Find the target element on the page
var target = $(".menu li:nth-child(4n)");
var overlay = null;
var tooltip = null;
// Creates overlay which will handle the first click
function createOverlay() {
overlay = $("<div class='overlay'></div>").appendTo("body");
// When user clicks somewhere on the page the overlay will handle the click
overlay.one("click", destroyOverlay);
}
// Destroys the overlay and tooltip
function destroyOverlay() {
if(overlay) {
overlay.remove();
overlay = null;
}
if(tooltip) {
tooltip.remove();
tooltip = null;
}
}
// Creates tooltip for the target element
function createTooltip(text) {
// Get the position of the target
var pos = target.position();
// Get the height of the target
var height = target.outerHeight();
// Create the tooltip
tooltip = $("<div class='tooltip'></div>")
.html(text)
.appendTo("body")
.css({
"top": pos.top + height + "px",
"left": pos.left + "px"
});
}
createOverlay();
createTooltip("Click on one of the tabs to<br>quickly scroll through the page!");
// Desotroy tooltip automatically after 5 seconds
setTimeout(destroyOverlay, 5000);
});
body {
background: black;
font-family: Verdana;
font-size: 12px;
}
.menu {
border: 1px solid gray;
padding: 0;
margin: 0;
width: 100%;
display: flex;
}
.menu li {
list-style-type: none;
color: gray;
padding: 15px;
flex: 1;
text-align: center;
}
.menu li + li {
border-left: 1px solid gray;
}
.menu li a {
color: gray;
text-decoration: none;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.0001);
z-index: 999;
}
.tooltip {
position: absolute;
z-index: 1000;
margin: 10px;
color: #fff;
width: 180px;
height: auto;
background: red;
padding: 10px;
}
.tooltip:before {
content:"";
position: absolute;
left: 25%;
transform: translate(-50%,-26px);
width: 0;
height: 0;
border-style: solid;
border-width: 0 13px 26px 13px;
border-color: transparent transparent red transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>
Home
</li>
<li>
Product
</li>
<li>
Shop
</li>
<li>
About the brand
</li>
<li>
Join us
</li>
<li>
Contact
</li>
</ul>

Change the colour of a triangle div over time

EDIT: https://codepen.io/TechTime/pen/NjZOGE This is what I want to achieve, happening every few random amount of seconds with random colors.
EDIT2: How would this be done with multiple triangles? I've tried a few things, but it hasn't worked. Help would be appreciated
I was wandering if it were possible to change the color of a triangle div so that every few seconds it would glow a color then go back to normal. Below is my triangle code:
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #e6e6e6;
}
I don't mind if it uses css, javascript or jquery. Just that it works! Thanks in advance.

The accepted solution does not meet all the criteria currently requested by the OP, I believe this one does and those being:
Random colors.
Random time intervals.
Return to initial color.
"Glows".
We use JS to change bottom border color and transition duration to random values. We also respond to the transitionend event so we don't have to use setInterval and know that the transition between colors has fully completed. Every other transition returns to the default gray. Glows by fading between colors instead of the color instantly changing to next color.
I've done this through a function that allows you to assign the element that requires the animation/transition and min/max parameters to control the time interval range between color changes. You'll also notice that I removed the pseudo element and nested a regular DIV as changing pseudo element CSS properties can be tricky.
var colorizer = function ( el, min, max ) {
// #link https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript
function getHexColor() {
return "#000000".replace( /0/g, function () {
return ( ~~( Math.random() * 16 ) ).toString( 16 );
} );
}
// #link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt( min, max ) {
return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
}
min = undefined == min ? 250 : min;
max = undefined == max ? 1500 : max;
var isDefaultColor = true,
style = el.style,
defaultColor = style.borderBottomColor,
color;
return function ( e ) {
el.offsetWidth; // Reset transition so it can run again.
color = isDefaultColor ? getHexColor() : defaultColor;
isDefaultColor = !isDefaultColor;
style.borderBottomColor = color;
style.transitionDuration = ( getRandomInt( min, max ) ) + 'ms';
};
},
triangle = document.querySelector( '.triangle > div' ),
triangleColorizer = colorizer( triangle, 750, 2000 );
triangle.addEventListener( 'transitionend', triangleColorizer );
// Kick it off!
triangleColorizer();
.triangle {
width: 5%;
height: 0;
padding: 0 0 5% 5%;
overflow: hidden;
}
.triangle > div {
width: 0;
height: 0;
margin-left: -500px;
border-right: 500px solid transparent;
border-left: 500px solid transparent;
border-bottom: 500px solid lightgray;
transition: border-bottom-color 1000ms ease-in-out;
}
<div class="triangle">
<div></div>
</div>

This changes the triangle color into a random color every 2 seconds. On the first function we iterate on a string of letters and return it with as a random hex code. The x function creates a style tag and appends it into the head tag then it toggles the class randColor defined inside the previous statement. Finally the setInterval function is called calling the functions every 2 seconds. The remover function just removes the style tag from the head so we don't keep appending style tags every 2 seconds. It changes color every 2 seconds then goes back to its original color. Hope this helps.
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function remover(){
$(".style-tag").remove();
}
function x(){
var style = $('<style class="style-tag">.randColor:after { border-bottom: 500px solid ' + getRandomColor() +'; }</style>');
$('html > head').append(style);
$(".triangle-up").toggleClass("randColor");
}
$(document).ready(function(){
setInterval(function(){
remover();
x();
}, 2000);
});
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #e6e6e6;
transition: all 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangle-up"></div>

So this is very crude, but the only way I see this possible is using jQuery and having a bunch of css classes. You cannot change the :after css rule via jquery, since it's not part of the dom. But we can do something like this (which I admit is tedious, but I don't quite see another way given your current html).
html
<div class="triangle-up blue">
</div>
jquery
var cachedColorName;
$(document).ready(function() {
setInterval(function(){
var newColor = 'red'; //(here you'd want to randomnly find a color that you have in your css
changeColor(newColor);
}, 3000);});
function changeColor(colorName) {
$('.triangle-up').removeClass(cachedColorName).addClass(colorName);
cachedColorName = colorName;
}
css
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
}
.triangle-up.blue:after {
border-bottom: 500px solid blue;
}
.triangle-up.red:after{
border-bottom: 500px solid red;
}
So you're just toggling different classes here. But this is the only way to make it random like you want (instead of hardcoded red that I did, you can programmatically pick a random color each time from a collection you have that has all the css classes that accompanies it).
Here's it in action:
https://jsfiddle.net/5b7wLv3r/2/
EDIT: if you need help randomly selecting a color, let me know. I can add that code.
EDIT 2: I made this a bit smarter for you
EDIT 3: finding the random color
css
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
}
.triangle-up.blue:after {
border-bottom: 500px solid blue;
}
.triangle-up.red:after{
border-bottom: 500px solid red;
}
.triangle-up.purple:after{
border-bottom: 500px solid purple;
}
.triangle-up.yellow:after{
border-bottom: 500px solid yellow;
}
.triangle-up.orange:after{
border-bottom: 500px solid orange;
}
.triangle-up.green:after{
border-bottom: 500px solid green;
}
html
<div class="triangle-up blue">
</div>
js
var cachedColorName;
var colorCollection = ['red', 'blue', 'purple', 'yellow', 'orange', 'green']
$(document).ready(function() {
setInterval(function(){
var newColor = randomItem(colorCollection); //(here you'd want to randomnly find a color that you have in your css
changeColor(newColor);
}, 3000);});
function changeColor(colorName) {
$('.triangle-up').removeClass(cachedColorName);
$('.triangle-up').addClass(colorName);
cachedColorName = colorName;
}
function randomItem(collection) {
return collection[Math.floor(Math.random()*collection.length)];
}
So basically, we have a collection here, which we randomly find a value in it, then pass the color name to our changeColor method. I did see in your question you want to change to random color, then back to default. Let me know if you need me to help you with that as well, basically just a boolean to see if you changed to random before. I would have implemented this in the code, but since you did not try it on your own I want to leave something up to you to figure out if so, just change to default. Otherwise, find the random color.
Working here:
https://jsfiddle.net/5b7wLv3r/3/

How to keep class of a div after page reload

Hey guys I have a navigation Menu and so on everything works fine. I added a class with font-awesome arrow which toggles when I click on the different menu items. The Menu will be expanded when I click on a specific link, a javascript is comparing the URL. Unfortunately when I click on a link, the menu will be expanded but my class is getting into its default state. I couldn't figure out on which part in the code I have to make this work. I would appreciate any suggestions and hope that there is a solution without cookies or external scripts. As far as I know, when I change the code wheter only the first symbol changes or all symbols are changing but not one specific.
here is a working example on my hoster click
here is the page "two.html" clicked and I would like to have the symbol of the arrow on the expanded menu changed to the "up" class (default down)
heres the fiddle (removed code for example)
The html can be seen on the testsite
here is the javascript
$(document).ready( function() {
// initialize accordion
$('#Accordion ul').each( function() {
var currentURI = window.location.href;
var links = $('a', this);
var collapse = true;
for (var i = 0; i < links.size(); i++) {
var elem = links.eq(i);
var href = elem.attr('href');
var hrefLength = href.length;
var compareTo = currentURI.substr(-1*hrefLength);
if (href == compareTo) {
collapse = false;
$(elem).css({ 'background-color': '#a7a9ac', 'color': '#000' });
break;
}
};
if (collapse) {
$(this).hide();
}
});
$("#Accordion").delegate('div', 'click', function() {
$('#Accordion div').removeClass( "up" );
$('#Accordion div').addClass( "down" );
var ul = $(this).next('ul');
if (ul.is(':visible')) {
ul.slideUp(500);
} else {
$('#Accordion ul').not(ul).slideUp(500);
ul.slideDown(500);
var div = $(this)
$( this ).toggleClass( "up" );
}
});
});
and the css
#charset "utf-8";
/* CSS Document */
body {
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
color: black;
background: #F8F8FF;
}
body,html {
margin: 0 auto;
padding: 0;
height:100%;
}
h2{margin-left:10px;padding-top:10px;}
p{padding-left:10px;}
body > #wrapper {height: auto; min-height: 100%;}
#wrapper {
width: 990px;
margin: auto;
padding: 0;
height:100%;
border-left:1px solid #a7a9ac;
border-right:1px solid #a7a9ac;
border-bottom:1px solid #a7a9ac;
-webkit-box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
background: url(inhalt.png) repeat-y center top fixed;
}
#header{
height:100px;
background:#363636;
color:silver;
font: 4em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
line-height: 120px;
padding: 0 20px;
}
#navi{
float:left;
background:#F8F8FF;
width:199px;
margin: 0;
padding: 0;
height:100%;
}
#text{
float:right;
width:760px;
padding-left:10px;
background:#F8F8FF;
}
#nav2 {list-style: none; padding: 5px 0 5px 0;text-align:center;margin:0;}
#foot a {vertical-align: -moz-middle-with-baseline; text-decoration: none; color:white;text-align:center;}
#foot li a:hover {text-decoration:underline;color:white;text-align:center;}
#foot {
color: white;
text-align: center;
background:#363636;
height:30px;
width:990px;
margin: 0 auto;
border:1px solid #363636;
clear:both;
}
.top{color:black;text-decoration:underline;}
.top:hover{color:red;text-decoration:underline;}
#Accordion,#Accordion ul{
list-style:none;
padding:0;
margin:0;
}
.cssmenu {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
width:100%;
}
.border{border-bottom:1px solid #a7a9ac;}
.bordertop{border-top:1px solid #a7a9ac;}
.cssmenu li a {
display: block;
padding: 5px 20px;
color: black;
text-decoration: none;
background:#DBDBDB;
}
.cssmenu ul li span{ display: block;
padding: 5px 20px;
background-color: #DBDBDB;
border-top:1px solid #a7a9ac;
cursor:pointer;
color:#000;
}
.cssmenu a:hover {
color: #FFF;
background-color:#363636;
}.cssmenu span:hover {
color: #FFF;
background-color:#363636;
}
.submenu li a {
display: block;
padding: 5px 40px;
color: black;
text-decoration: none;
background:#DBDBDB;
border-top:1px solid #a7a9ac;
}
#test{
}
.down{
}
.down::after {
content: '\f107';
color: black;
font-family: FontAwesome;
position: absolute;
margin-top: -20px;
margin-left: 170px;
}
.up{
}
.up::after {
content: '\f106';
color: black;
font-family: FontAwesome;
position: absolute;
margin-top: -20px;
margin-left: 170px;
}
Thank you in advance

If you wanted you can use Local Storage to remember the class applied to an element and re-apply it on refresh/re-load.
In JQuery it's something like this:
$(document).ready(function() {
if(localStorage.getItem("storageItemName")) {
$(target-element).addClass('myClass')
}
});
$(window).unload(function() {
localStorage.setItem("storageItemName", $(target-element).hasClass('myClass'));
});

There is no need here to use cookies or local storage since you don't need to persist data between pages.
I think the main problem here is that you're not toggling the up/down classes. You don't check to see whether the class is currently up or down when you click on the div therefore you're always setting the class of every div in the Accordion to down. Also you ONLY want to set the class of the div that was clicked on. Not every div in the Accordion ul. You should be doing something like:
$("#Accordion div").click(function() {
// Get the next ul that will be expanded/collapsed
var nextUL = $(this).next('ul');
// Is the current div already expanded?
if ($(this).hasClass("up")) {
// The current div is already expanded. Collapse it.
$(this).removeClass("up");
$(this).addClass("down");
nextUL.slideUp(500);
} else if ($(this).hasClass("down")) {
// The current div is currently collapsed. Expand it.
$(this).removeClass("down");
$(this).addClass("up");
nextUL.slideDown(500);
}
});

I got it!
I had to make the right If-query
if($(this).css('display') == 'block')
{
$(this).prev('div').removeClass( "down" );
$(this).prev('div').addClass( "up" );
}
here is the complete Javascript I hope someone could help this sometime.
With the actual script it remembers the link that had been clicked, it toggles the symbols when you click on the divs and the specific symbol of the expanded menu is changed on page refresh. Without cookies or local storage. Thank you for your help with a few ideas from you I got it this far.
$(document).ready( function() {
// initialize accordion
$('#Accordion ul').each( function() {
var currentURI = window.location.href;
var links = $('a', this);
var collapse = true;
for (var i = 0; i < links.size(); i++) {
var elem = links.eq(i);
var href = elem.attr('href');
var hrefLength = href.length;
var compareTo = currentURI.substr(-1*hrefLength);
var div = $(this);
if (href == compareTo) {
collapse = false;
$(elem).css({ 'background-color': '#a7a9ac', 'color': '#000' });
break;
}
};
if (collapse) {
$(this).hide();
}
if($(this).css('display') == 'block')
{
$(this).prev('div').removeClass( "down" );
$(this).prev('div').addClass( "up" );
}
});
$("#Accordion").delegate('div', 'click', function() {
$('#Accordion div').removeClass( "up" );
$('#Accordion div').addClass( "down" );
var ul = $(this).next('ul');
if (ul.is(':visible'))
{
ul.slideUp(500);
}
else
{
$('#Accordion ul').not(ul).slideUp(500);
ul.slideDown(500);
var div = $(this)
$( this ).toggleClass( "up" );
}
});
});
and here i have also an updated fiddle without useless code just the pure menu.