0

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

JudgeFudge
  • 63
  • 2
  • 9
  • Local storage? It's not *really* a cookie. – Paulie_D Mar 10 '16 at 16:50
  • read about that, but I am not really into javascript this much. I have no idea how to get it work. thought about .eq() but couldn't find a proper equivalent to that. – JudgeFudge Mar 10 '16 at 16:54
  • Here try this - http://stackoverflow.com/questions/20595982/how-to-use-local-storage-for-active-class – Paulie_D Mar 10 '16 at 17:05
  • Or this search - https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=store+and+retrieve+active+class+in+localstorage+jquery Might be some idea there. I only just used it for the first time today. – Paulie_D Mar 10 '16 at 17:08

3 Answers3

0

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'));
});
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

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);
    }
});
compman2408
  • 2,369
  • 1
  • 15
  • 15
  • This does not really work, when I update the code there aren't any significant changes, while this is a click function I don't really have a click function when the page reloads. – JudgeFudge Mar 11 '16 at 08:14
0

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.

JudgeFudge
  • 63
  • 2
  • 9