Member Avatar for mikeandike22

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.

  • 1 Contributor
  • 2 Replies
  • 197 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by mikeandike22
Member Avatar for mikeandike22

Example I used this method successfully in

<Doctype html>
<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js />
<script src=https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js />
<style>
	.sideBar{
		height: 800px;
		background-color:#000;
		width:100px;
		float:left;
		color:#fff;
	}
	.mainContent{
		width:100%;
		height:100%;
		background-color:#f5f5f5;
	}
	.collapse{
		width:0px;
		background-color:#ccc;
	}
	.hide{
		display:none;
	}
</style>
<script>
	$(function(){
		$('a').click(function(){
			
			$('.sideBar').toggleClass('collapse',1200);
			$('.vertNav').toggleClass('hide',900);
			if($(this).html() == '&lt; Collapse'){
				$(this).html('Expand &gt;');			
			}
			else{
				$(this).html('&lt; Collapse');
			}
		});
	});
</script>
</head>
<body>
 <section class=sideBar >
	<nav class=vertNav >
	 <ul>
	  <li>Link 1</li>
	  <li>Link 2</li>
	 <li>Link3</li>
	</ul
	</nav>
 </section>
 <a href=# > &lt; Collapse</a>
 <section class=mainContent>
	<p>Lorem upsum</p>
	<p>Lorem upsum</p>
	<p>Lorem upsum</p>
	<p>Lorem upsum</p>
</section>
</body>
</html>
Member Avatar for mikeandike22

Wow silly mistake still doesnt work completely but line 4 and 5 of the jquery I forgot the '$'

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.