CMS Dynamic Accordion Menu w Active Parent Eventually Responsive

Question

Backstory of the CMS Ruby Issue

Okay so my main issue is that I'm trying to accomplish a mobile first navigation system that accordions down on itself. The catch is that the navigation is generated from a content management system script that runs on ruby on rails. I can not edit the script and we are not allowed to change anything with the content management system. ( I work for a major university so there are things out of my control.)

Similar Concept

http://codepen.io/micahgodbolt/full/czwer

JS Fiddle

I've created a JS Fiddle for what is currently happening and what I'm trying to do. Although this somewhat works I want to be able to open up each separately and have them either stay open or collapse. I'm open to many suggestions and even to rework the whole thing.

http://jsfiddle.net/bC475/7/

HTML

<nav class="menu twelvecol last">
<ul>
    <li><a href="#">Home</a>

    </li>
    <li> <a href="#">Graduate Students</a>

        <ul>
            <li> <a href="#">Graduate Research</a>

                <ul>
                    <li><a href="#">Departments</a>

                    </li>
                    <li><a href="#">Tertiary Page</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">Graduate Programs</a>

            </li>
            <li><a href="#">Apply Now</a>

            </li>
        </ul>
    </li>
    <li> <a href="#">Primary Page Link</a>

        <ul>
            <li> <a href="#">Secondary Page Link</a>

                <ul>
                    <li><a href="#">Tertiary Page Link</a>

                    </li>
                    <li><a href="#">test a 2</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">test b</a>

            </li>
        </ul>
    </li>
    <li> <a href="#">test 2</a>

        <ul>
            <li><a href="#">test 2 a</a>

            </li>
            <li><a href="#">test 2 b</a>

            </li>
            <li><a href="#">test 2 c</a>

            </li>
        </ul>
    </li>
</ul>

CSS

nav span {
    background-image: url("http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
    border:none;
    display:block;
    float:right;
    height:20px;
    width:20px;
}
.bgchange {
    background:#333;
    color:#fff;
}
nav ul {
    list-style: none;
    border-top: 1px solid #efefef;
    margin: 42px 0px 0px 10px;
    font-size: 1.2em;
    letter-spacing: 2px;
}
/* line 211, ../scss/_main.scss */
 nav ul li {
    width: 100%;
    margin: 0;
}
/* line 214, ../scss/_main.scss */
 nav ul li a {
    display: block;
    padding: 12px 14px;
    font-weight: bold;
    color: #3b4a54;
    border-bottom: 1px solid #efefef;
    text-decoration: none;
}
/* line 221, ../scss/_main.scss */
 nav ul li a:hover {
    color: #252e35;
    background: rgba(153, 204, 255, 0.2);
    text-decoration: none;
}
/* line 225, ../scss/_main.scss */
 nav ul li a:active {
    color: #252e35;
    background: rgba(153, 204, 255, 0.1);
    text-decoration: none;
}
/* line 229, ../scss/_main.scss */
 nav ul li a:focus {
    color: #fff;
    background: rgba(153, 204, 255, 0.2);
    text-decoration: none;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}
/* line 235, ../scss/_main.scss */
 nav ul ul {
    display:none;
    margin: 0 0 0 0;
    padding-bottom: 0;
    list-style-type: none;
    font-size: .8em;
    width: 100%;
    border: none;
}
/* line 242, ../scss/_main.scss */
 nav ul ul li a {
    padding: 7px 28px 7px 18px;
    font-weight: 500;
    border-bottom: none;
}
/* line 246, ../scss/_main.scss */
 nav ul ul li a:hover {
    background: rgba(66, 64, 62, 0.2);
    padding: 7px 28px 7px 18px;
    font-weight: 500;
    border-bottom: none;
}
/* line 251, ../scss/_main.scss */
 nav ul ul li a:active {
    background: rgba(66, 64, 62, 0.1);
    padding: 7px 28px 7px 18px;
    font-weight: 500;
    border-bottom: none;
}
/* line 256, ../scss/_main.scss */
 nav ul ul li a:focus {
    background: rgba(66, 64, 62, 0.2);
    color: #1f272c;
}
/* line 260, ../scss/_main.scss */
 nav ul ul ul {
    display:none;
    margin: 0;
    padding-bottom: 0;
    list-style-type: none;
    font-size: 1em;
    font-style: italic;
}
/* line 266, ../scss/_main.scss */
 nav ul ul ul li a {
    padding: 7px 28px 7px 35px;
    font-weight: normal;
    color: #5c6f7b;
    border-bottom: none;
}
/* line 271, ../scss/_main.scss */
 nav ul ul ul li a:hover {
    background: rgba(217, 84, 30, 0.2);
    padding: 7px 28px 7px 35px;
    font-weight: normal;
    border-bottom: none;
}
/* line 276, ../scss/_main.scss */
 nav ul ul ul li a:active {
    background: rgba(217, 84, 30, 0.1);
    padding: 7px 28px 7px 35px;
    font-weight: normal;
    border-bottom: none;
}
/* line 281, ../scss/_main.scss */
 nav ul ul ul li a:focus {
    background: rgba(217, 84, 30, 0.2);
    color: #1f272c;
}

JQUERY

$('nav li:has(ul)').prepend('<span class="toggleSwitch"><a href="#"> </a></span>');
$('nav li li:has(ul)').prepend('<span class="toggleSwitch"><a href="#"> </a></span>');

$("nav li span.toggleSwitch").click(function (event) {
    $('nav li > ul').slideToggle().end().siblings().hide('nav li li ul');
    event.stopPropagation();
});

Answer 1

http://jsfiddle.net/ddavisgraphics/JY433/2/

     // Navigation Accordion Jquery Mobile Solutions

// Creates an Icon and Btn To Toggle Sub Layers    
$('nav > ul > li:has(ul)').prepend('<i class="icon-plus-sign pull-right btnToggle"> </i>');
$('nav > ul > li > ul > li:has(ul)').prepend('<i class="icon-plus-sign pull-right btnToggle"> </i>');

// Adds Classes to the Various UL's For Control    
$('nav > ul').addClass('primary');
$('nav > ul > li > ul').addClass('secondary');
$('nav > ul > li > ul > li > ul').addClass('tertiary');

// Hides Sub Navigation UL by Class
$('.secondary').hide();
$('.tertiary').hide();

// Hides Sub Navigation UL by Class
$('.btnToggle').click(function() {
    $(this).siblings('ul').slideToggle('fast');

    // CSS Toggle to change Icon For Use 
    if ($(this).hasClass('actToggle')) {
        $(this).removeClass('actToggle'); 
      }
    else {
        $(this).addClass('actToggle');
     }
});

I have solved the issues I had I'm sure more will pop up, but I have a great start on it now. For anyone else out there having the same issues I have placed a Fiddle Up with what I have done.

Basically I target the Button Toggles and Add Classes the Various UL's. I don't really use the classes for anything other than making sure they are hidden and giving me a good idea of how to target specific areas.

I then looked for siblings to toggle. The UL the original method I was using would only show and not collapse as well. THen I added and if Else statemtn that added another class that changed the minus and plus sign hopefully added a bit of User Experience and relatability to the toggling of the menu.