Toggling between classes on clck

HTML & CSS
1

A very kind user was able to help me with code for what i needed, now i am unable to understand how to apply my css on it. Here is the JSFiddle and

and css, i want to apply on it, so when its open, it toggle to class with property of rotate.

nav a.switch{
      content: '';
      background-color: #fff;
      background:url('img/open.png') no-repeat;
      width: 18px;
      height: 10px;
      display:inline-block;
      margin:-24px 0 0 35px;
      float: right;
}
.dropdown-menu li.expanded > a:after{
    -ms-transform: rotate(18deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
    -webkit-transition-timing-function: linear; /* Safari and Chrome */
    transition-timing-function: linear;
}

Now, i am lost here, as i don’t know what is going on with css.

@PaulOB Can you help me out here?

2

Hi,

I’m not sure what you are trying to do but if you want to spin the arrow then try something along these lines.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* base */
nav ul, nav li {
    margin:0; padding:0; list-style:none; background:#FFF;
    position:relative;
}
nav ul { 
    position:relative;    
    border:solid 1px #CCC;
    display:inline-block;
}
nav ul li {
    width:140px;
    border-bottom:solid 1px #CCC;
    position:relative;
}
nav ul li:last-child {
    border-bottom:none;
}

/* links */
nav a {
    display:block;
    padding: 0 5px;
    text-decoration:none;
    color:#2980b9;        
    height:30px;
    line-height:30px;
}

nav a:hover{
    background:#2980b9;
    color:#FFF;    
}

nav a.switch {
    position:absolute;
    z-index:2;
    right:0;
    top:0;
    width:20px;
    text-align:center;
    background:#ECECEC;
    color:#333;
		transition:all .5s ease;
}

nav a.switch:hover {
    color:#FFF;
    background:#333;
}

/* second and deeper levels */
nav > ul ul { 
    display: none; 
}
 li.expanded > a.switch{
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}

</style>
</head>

<body>
<nav>
    <ul>
        <li><a href="#">First</a></li>
        <li>
            <a href="#">Second</a>
            <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li>
                    <a href="#">Sub Item 3</a>
                    <ul>
                        <li><a href="#">Deep Item 1</a></li>
                        <li>
                            <a href="#">Deep Item 2</a>
                            <ul>
                                <li><a href="#">Deeper Item 1</a></li>
                                <li><a href="#">Deeper Item 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Deep Item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Third</a></li>
    </ul>
</nav>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $('nav a').each(function(){        
        
        var link = $(this);
        
        var item = link.parent('li');        
    	
        if (!item.children('ul').length) { return; }   
        
        var switchLink = $('<a/>').attr('href', '#');
        
        switchLink.addClass('switch').html('>').insertAfter(link);
        
        $(switchLink).click(function(e){
            e.preventDefault();
			item.children('ul').eq(0).toggle();            
            item.toggleClass('expanded');
            //$(this).html(item.hasClass('expanded') ? '<' : '>');
        });        
        
    });    
});


</script>

</body>
</html>
3

I think you understood my problem. Code would be good in JSfiddle.

Edit : Here is the JSFiddle

much neater.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.