We Keep Coding

Make visible, which Accordion Tab is opened

I have this "Accordion Type" Snippet right now. It opens the content below the button on click and closes it again. Now I am looking for a solution to make the state of the button visible to the user e.g if Button 2 is opened, I want to show a "-" indicating that it can be closed with a click. Same with the closed buttons to show a "+". Is this possible? Thanks in advance :)
This is my code right now:
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery(this).next('.ss_content').slideToggle('fast');
});
jQuery('.ss_content').eq(1).show();
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger</div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button">Mittelklasse</div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End</div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>

I've added some changes to your css:
.ss_button:before {
content: "+ ";
}
.ss_button.active:before{
content: "- ";
}
Then we toogle the active class:
jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
jQuery(this).toggleClass('active');
This way you don't have to change your html.
Demo
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
jQuery(this).toggleClass('active');
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery(this).next('.ss_content').slideToggle('fast');
});
jQuery('.ss_content').eq(1).show();
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_button:before {
content: "+ ";
}
.ss_button.active:before{
content: "- ";
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger</div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button active">Mittelklasse</div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End</div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>

You can add an empty span in your buttons and change the content (+ or -) in the click functions.
Check lines #4 and #6, the same of the code is the same.
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery('.ss_button').find('span').text('+');
jQuery(this).next('.ss_content').slideToggle('fast');
jQuery(this).find('span').text('-');
});
jQuery('.ss_content').eq(1).show();
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger
<span>+</span></div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button">Mittelklasse
<span>+</span></div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End
<span>+</span></div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>

How to fade between divs on click, starting with display none?

I came across this JSFiddle online whilst searching for a solution. It almost does what I need except I need to start with the div being hidden. I've tried playing around with it but being new to JS I've not had much luck.
I thought I'd put this here as a starting point to see if anyone could advise on the route I would need to take?
Any help would be appreciated.
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
#div1 {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

Just add display: none; in css to an element which you want to be hidden.
And remove class="active" from first li so that it's not chosen.
And modify js a little bit. See your function only shows a div if previously it hid. And if you start with all hidden it won't hide anything therefore it won't show anything.
$(document).ready(function() {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
EDIT
If you want to hide all the divs on click anywhere else here is how to:
It's actually pretty easy.
We bind click event to document and check what was clicked.
If it was div with content (#div1, #div2 etc.) or if it is menu element we do not want to hide the div, but else we do.
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
e.target returns an element which (in this case) was clicked. If it has class pbox it means this is a div with content.
Second condition is menu element. If .closest() function
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
returns an element with id="menu" it means that we clicked on an element inside the menu.
Notice the exclamation mark. It means that if the condition is false return true. So if we did not click the div with content and if we did not click menu element then we hide the div.
I hope you understand what I mean :)
$(document).ready(function() {
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

i just delete the class "current". but first div still appear, so i create another div, empty, and it works :)
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div5"></div>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

Delete class="current", so none is active at the beginning,
and then set the first div to display:none;

drop - down menu using JS onclick - what is wrong?

Just learing JS. I have created 3 dropdown menu with different choices and added JS function. HTML and CSS seems to be right. I am concerned about my JS, because it just does not work. Is the even right for that purpose? I am not sure if I use ".this" in the right place.
I would really appreciate any hints!
my JAVASCRIPT:
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
var arrow= document.querySelectorAll(".list_arrow");
var panel= document.querySelectorAll(".list_panel");
for (var i= 0; i < arrow.length; i++) {
arrow[i].addEventListener('click', function showDiv(event) {
if (panel.this.style.display == 'none') { //panel(this.style.display=='none')?
panel.this.style.display = 'block';
}
else {
panel.this.style.display = 'none';
}
});
}
});
HERE IS MY CSS
.form {
margin-top:50px;
}
.drop_down_list {
border:1px solid #8de0d2;
width: 280px;
height:38px;
background-color: white;
margin-top:22px;
padding: 8px 12px;
position: relative;
}
.list_label {
font-size: 30px;
color: #e2e2e2;
font-family: 'ralewaylight', Arial, Tahoma, sans-serif;
}
.list_arrow {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #24baa0;
display:block;
position: absolute;
right: 14px;
top: 20px;
cursor: pointer;
}
.list_panel {
background-color: white;
border: 1px solid #ccc;
width: 288px;
padding-left: 15px;
padding-bottom: 10px;
list-style: none;
margin: 0;
left: 0px;
z-index: 2;
position: absolute;
top: 54px;
display:none;
}
.list_panel li {
margin-top:10px;
cursor: pointer;
color: #585858;
}
<div class="form">
<div class="drop_down_list">
<span class="list_label">Choose a chair</span>
<span class="list_arrow"></span>
<ul class="list_panel">
<li>Clair</li>
<li>Margarita</li>
<li>Selena</li>
</ul>
</div>
</div>
<div class="drop_down_list">
<span class="list_label">Choose color</span>
<span class="list_arrow"></span>
<ul class="list_panel">
<li>red</li>
<li>black</li>
<li>orange</li>
</ul>
</div>
<div class="drop_down_list">
<span class="list_label">Choose material</span>
<span class="list_arrow"></span>
<ul class="list_panel">
<li>a</li>
<li>b</li>
</ul>
</div>
</div>

The this keyword refers to the current scope. It is of no use in the state you are using it. What I suggest is to locate the list_panel that is associated with the clicked arrow. There are numerous ways to do that, but you can use the following:
Note that I also added default display-none classes so that they get shown on the first click (this wasn't the case).
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
var arrow= document.querySelectorAll(".list_arrow");
for (var i= 0; i < arrow.length; i++) {
arrow[i].addEventListener('click', function showDiv(event) {
// Find the panel associated with the clicked arrow.
var parent = event.target.parentNode,
currentPanel = parent.children[2];
if (currentPanel.style.display == 'none') {
currentPanel.style.display = 'block';
}
else {
currentPanel.style.display = 'none';
}
});
}
});</script>
.form {
margin-top:50px;
}
.drop_down_list {
border:1px solid #8de0d2;
width: 280px;
height:38px;
background-color: white;
margin-top:22px;
padding: 8px 12px;
position: relative;
}
.list_label {
font-size: 30px;
color: #e2e2e2;
font-family: 'ralewaylight', Arial, Tahoma, sans-serif;
}
.list_arrow {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #24baa0;
display:block;
position: absolute;
right: 14px;
top: 20px;
cursor: pointer;
}
.list_panel {
background-color: white;
border: 1px solid #ccc;
width: 288px;
padding-left: 15px;
padding-bottom: 10px;
list-style: none;
margin: 0;
left: 0px;
z-index: 2;
position: absolute;
top: 54px;
display:none;
}
.list_panel li {
margin-top:10px;
cursor: pointer;
color: #585858;
}
<div class="form">
<div class="drop_down_list">
<span class="list_label">Choose a chair</span>
<span class="list_arrow"></span>
<ul class="list_panel" style='display: none'>
<li>Clair</li>
<li>Margarita</li>
<li>Selena</li>
</ul>
</div>
</div>
<div class="drop_down_list">
<span class="list_label">Choose color</span>
<span class="list_arrow"></span>
<ul class="list_panel" style='display: none'>
<li>red</li>
<li>black</li>
<li>orange</li>
</ul>
</div>
<div class="drop_down_list">
<span class="list_label">Choose material</span>
<span class="list_arrow"></span>
<ul class="list_panel" style='display: none'>
<li>a</li>
<li>b</li>
</ul>
</div>
</div>

You may want to try using jQuery to help you with show() and hide() functions, though it is said that you might not need it :P
I don't understand the declaration of panel.. Thus I cannot go along panel.this. My solution is attached here:
http://codepen.io/anon/pen/akXqwA
The main problem is that, during the for-loop, the i will end at the value 3. When the event is triggered, i will always be 3, and I cannot access the panel with panel[i].
So I made a "hack" around it, by getting its nextElementSibling and changing its style.display. Also, I have initialised the value with the HTML (style="display: none;"). If you removed that part, the first click on the arrow will not show the items as the style.display value is not "none". There is a way to avoid changing that in HTML: try playing with the line ;)

Check this:
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
var arrow = document.querySelectorAll(".list_arrow");
var panel = document.querySelectorAll(".list_panel");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener('click', function showDiv(event) {
var ulelm = this.parentNode.querySelector("ul");
if (ulelm.style.display == 'none') {
ulelm.style.display = 'block';
} else {
ulelm.style.display = 'none';
}
});
}
});
working example is here.

Stop redirect on an onsubmit function that adds another tab

I am building an on submit function to create a div, id, and class, that builds a new tab. I'm able to see that on submit, it does seem to create the list item, the redirect causes the list item to be deleted and sent back to the original page. I wanted to add content to the tab, but that becomes useless once the redirect happens. If someone could show where the problem is occurring that would be helpful.
/**Covers tab animations
May not matter just had to make sure*/
jQuery(document).ready(function(){
jQuery('.tabs .tab-links a').on('click', function(e){
var currentAttrValue = jQuery(this).attr('href');
$('.tabs ' + currentAttrValue).show();
$('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400);
$('.tabs ' + currentAttrValue).siblings().css({opacity:0, paddingLeft:'0%'});
$('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
/** for the onsubmit functions*/
$(function(){
//catches the information entered into form
var $textInput = $('.examine input:text');
$('#examine').on('submit', function(e){
e.preventDefault;
//puts the information into a variable
var newText = $textInput.val();
//adds a new tab to list
$('li:last').append('<li>' + "newText" + '</li>');
$textInput.val('');
});
});
.tab-links{
float:left;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
list-style-type: none;
border-bottom: 3px solid;
letter-spacing: 0.09em;
margin-left: -25%;
}
.tab-links li a {
color: #f2f2f2;
display: block;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
.tab-links li.active, .tab-links li.hover {
background-color: #e5e5e5;
border-bottom: 3px solid #e5e5e5;
}
.tab-links li.active a, .tab-links li a:hover {
color: #666;
background-color: #e5e5e5;
}
/*----- Content of Tabs -----*/
.tab-content {
background-color: #e5e5e5;
color: #666;
min-height: 150px;
overflow: auto;
}
#tab1{
padding-left: 30%;
}
#tab2, #tab3, #tab4 {
display:none;
opacity: 0;
padding-left: 0%;
}
.tab-content p {
margin: 20px;
text-indent: -40%;
}
.tab-content.active{
display: block;
text-indent: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="sidebar">
<div id="explore">
<form id="examine">
<p>Search</p>
<input type="search" name="explore" placeholder="Search Items" />
<p>Choose Your Search Restrictions</p>
<input type="radio" name="location" required= "required" value="Your School" />Inside
<input type="radio" name="location" required= "required" value="Whole system" />Outside
<input type="submit" value="Search" />
</form>
</div>
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Tab1 content</p>
</div>
<div id="tab2" class="tab">
<p>Tab2 content</p>
</div>
<div id="tab3" class="tab">
<p>Tab3 content</p>
</div>
<div id="tab4" class="tab">
<p>Tab4 content</p>
</div>
</div>
</div>
</div>

You need to call your e.preventDefault(), you forgot to call the second one.

dynamically loading content with jquery doesnt work

So..
I've been trying to dynamically load content but when I click on the menu loader shows only. It seems I can't figure this out, can you please look at the code and tell me if I missed something or did wrong?
this is my html
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<img src="images/logo.png"/>
</div>
<div id='cssmenu'>
<ul id="nav">
<li class='has-sub'>Storitve
<ul>
<li>Grafično oblikovanje</li>
<li>Spletno oblikovanje</li>
<li>Industrijsko oblikovanje</li>
</ul>
</li>
<li>Reference</li>
<li>Cenik</li>
<li class='last'>Kontakt</li>
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<p>©Copyright 2015</p>
</div>
</div>
</body>
</html>
..and js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
and css
body { width:100%;
height:100%;
margin:0px;
padding:0px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
text-align:center;
background:#BFBFBF;
padding-bottom:60px;
}
#logo { float:left;
position: fixed;
margin-top: 20px;
margin-left: 20px;
margin-bottom:20px;
z-index: 2000;
}
#top { position:relative;
top: 0px;
left:0px;
width:945px;
height: 160px;
background-color: white;
z-index:auto;
opacity: ;
}
#cssmenu { float:right;
position:fixed;
margin-top:123px;
margin-left:554px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 11px;
line-height: 15px;
text-transform: uppercase;
text-align: left;
z-index:3;
}
#cssmenu > ul { width: auto;
list-style-type: none;
padding: 0;
margin: 0;
}
#centeredmenu ul ul {
z-index: 1 !Important;
}
#wrapper { width: 945px;
margin:0px auto;
background: #BBB;
position:relative;
border: ;
}
#content { width:880px;
background-color:white;
border: px solid white;
margin: 10px auto;
padding: 0 30px;
}
#footer { position:fixed;
bottom:0;
left:0;
width:100%;
height:40px; /* Height of the footer */
background:white;
}
#load {
display: none;
position: absolute;
right:460px;
top: 380px;
background: url(../images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}

You are removing your loader from the DOM:
$('#load').remove();
yet after that you try to fade it in while it does not exist:
$('#load').fadeIn('normal');
Replace the .remove() with a .hide() call to hide it, but not remove it from the DOM.

This is my navigation menu and what I'm trying to make is when I click on navigation, it dynamically loads the requested page into a content div with jQuery.
<div id='cssmenu'>
<ul id="nav">
<li>Domov</li>
<li class='has-sub'>Storitve
<ul>
<li>Grafično oblikovanje</li>
<li>Spletno oblikovanje</li>
<li>Industrijsko oblikovanje</li>
</ul>
</li>
<li>Reference</li>
<li>Cenik</li>
<li class='last'>Kontakt</li>
</ul>
</div>
</div>
<div id="content"></div>
And I changed JS code into:
$(document).ready(function() {
// initial
$("#content").load("content/index.html");
// handle menu click
$("ul#nav li a").click(function() {
var page = $(this).attr("href") ;
$("#content").load("content/" + page + ".html");
return false;
});
});
but it's working just on 2 menu buttons.