John M. John M. - 18 days ago 6
jQuery Question

How to change where the toggle begins?

I have been learning Bootstrap from a series of videos on youtube.com. One of the videos constructs a sidebar menu and I have faithfully copied the code, experimented with it and have it working on my local machine. The problem is that as a default it hides the sidebar menu until I click on the toggle menu. I'd like it to be the reverse of that. I want it to show the sidebar menu until I click the toggle button. How would I edit the code in order to do that. Many thanks.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sidebar template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/init.js"></script>
<link rel="stylesheet" href="css/sidebar.css">
<!--My own custom styles-->
<link href="css/myStyles.css" rel="stylesheet">
</head>
<body>

<div id="wrapper">

<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#">Account</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>

<!-- Page content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-success" id="menu-toggle">Toggle Menu</a>
<h1>Sidebar Layouts are Cool</h1>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam quis nostrud exercitation ulliam. Corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat vel willum lunombro. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit. Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</div>
</div>

</div>

<!-- Menu toggle script -->
<script>
$("#menu-toggle").click( function (e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
</script>

</body>
</html>


CSS

@charset "utf-8";
/* CSS Document */

/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: absolute;
width: 0;
height: 100%;
overflow-y: hidden;
background: #2C3E50;
/*border: 2px solid red;*/
opacity: 0.9;
}

/* Always take up entire screen */
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
/*border: 5px solid blue;*/
}


/* Change with of sidebar from 0 to 250px */
#wrapper.menuDisplayed #sidebar-wrapper {
width: 250px;
}

/* Since we added left padding, we need to shrink the width by 250px */
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}


/* Sidebar styling - the entire ul list */
.sidebar-nav {
padding: 0;
list-style: none;
}

.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}

.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}

.sidebar-nav li a:hover {
background: #16A085;
}

Answer
$("#wrapper").toggleClass("menuDisplayed");

This is adding and removing the class that shows the menu. I would assume if you want to make it start off shown, add that class to that element in the markup for when the page first loads. Then it should show and the first click will remove it.