Collapse side bar

want to use jquery to collapse aside

Page 1 of 1

1 Replies - 5184 Views - Last Post: 27 October 2010 - 08:59 PM

#1 billpull1   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 10-June 10

Collapse side bar

Posted 27 October 2010 - 07:35 PM

I am trying to collapse a sidebar with Jquery I have accomplished this with a simpler example but would like to incorporate it into a more complex document here is the code

 
<aside id="leftColumn" class="left sideBar"> <!--Thing I want to Collapse-->
        	
                <nav class="leftNav">
		   <ul class="align_right indiBtn">
                         <li class="dashboard"><a href="#" title="Dashboard" style="color:#fff;text-shadow:1px 1px 0px #44aadb;">Dashboard</a></li>
                         <li><a href="#" title="Documents" style="text-shadow:1px 1px 0px #eee;">Documents</a></li>
                         <li><a href="#" title="Chat" style="text-shadow:1px 1px 0px #eee;">Chat</a></li>
                         <li><a href="#" title="Settings" style="text-shadow:1px 1px 0px #eee;">Settings</a></li>
                    </ul>
                </nav>	
        </aside><!--//end #leftColumn//-->
	<a href="#" class="horizCollapse"><button>&#x25C0;</button></a><!-- Button used to trigger


//CSS code
#leftColumn{
	margin:20px;
	padding-right:20px;
	border-right:1px solid #d7d7d7;
}
.leftNav ul li{
	height:38px;
	width:150px;
	border:1px solid #fff;
	display:block;
	margin:10px 0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-color:#f5f5f5;
	background:
	-webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.27, #d2d3d3),
			color-stop(0.97, #fdfbfb),
			color-stop(1, #e9ebec)
	);
	background:
	-moz-linear-gradient(
		center bottom,
		#d2d3d3 27%,
		#fdfbfb 97%,
		#e9ebec 100%
	);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
	box-shadow:1px 1px 0px 3px #bdc6c8;
	-moz-box-shadow:1px 1px 3px #bdc6c8;
	-webkit-box-shadow:1px 1px 3px #bdc6c8;
}
.horizCollapse{
	position:absolute;
	left:194px;
	font-size:16px;
	top: 73px;
}
.collapse{width:0px;}
.hide{display:none;}



Jquery code
<script>
$(document).ready(function() {
 	$('a').click(function(){
		('.sideBar').toggleClass('collapse',1000);
		('#leftNav').toggleClass('hide', 200);
		if($(this).html() == '&lt; Collapse'){
				$(this).html('&#x25B6;');			
			}
			else{
				$(this).html('&#x25C0;');
			}
		
	});
});
</script>



Any comments appreciated trying to get better at jquery main wall im hitting is just inconsistency when functions dont want to work on similar setups to tutorials.

Is This A Good Question/Topic? 0
  • +

Replies To: Collapse side bar

#2 billpull1   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 10-June 10

Re: Collapse side bar

Posted 27 October 2010 - 08:59 PM

Wow silly mistake still doesnt work completely but line 4 and 5 of the jquery I forgot the '$'
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1