scottiescotsman scottiescotsman - 4 months ago 38
jQuery Question

how do i get my accordion to open & glyphicon to rotate on click and do reverse on reclick

<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>www.scottiescotsman.com</title>

<!-- Bootstrap core CSS -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>

<body>

<div id="header">
<div class="logo"><a href="#">SCOTTIE<span>SCOTSMAN</span></a></div>
</div>

<a class="mobile" href="#">MENU</a>

<div id="container-fluid">

<div class="sidebar">

<ul class="accordion">

<li class="general">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;FORMS<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">GENERAL FORMS</a></li>
<li><a href="#">ADVANCED COMPONENTS</a></li>
<li><a href="#">FORM VALIDATION</a></li>
<li><a href="#">FORM WIZARD</a></li>
<li><a href="#">FORM UPLOAD</a></li>
<li><a href="#">FORM BUTTONS</a></li>
</ul>
</li>

<li class="ui_elements">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;UI ELEMENTS<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">GENERAL ELEMENTS</a></li>
<li><a href="#">MEDIA GALLERY</a></li>
<li><a href="#">TYPOGRAPHY</a></li>
<li><a href="#">ICONS</a></li>
<li><a href="#">GLYPHICONS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">INVOICE</a></li>
<li><a href="#">INBOX</a></li>
<li><a href="#">CALENDAR</a></li>
</ul>
</li>

<li class="monitoring">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;MONITORING<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">PANELS</a></li>
<li><a href="#">TYPOGRAPHY</a></li>
<li><a href="#">ICONS</a></li>
<li><a href="#">BUTTONS</a></li>
<li><a href="#">TABS</a></li>
<li><a href="#">MODALS</a></li>
<li><a href="#">ALERTS</a></li>
<li><a href="#">GRID SYSTEM</a></li>
<li><a href="#">DRAGGABLE</a></li>
</ul>
</li>

<li class="table-design">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;TABLE DESIGN<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">TABLE STYLES</a></li>
<li><a href="#">DATA TABLES</a></li>
</ul>
</li>

<li class="charts">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;CHARTS / GRAPHS<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">PLOT LINE</a></li>
<li><a href="#">SPARKLINE</a></li>
</ul>
</li>

<li class="basic">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;BASIC<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">PROFILE</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">LIST</a></li>
<li><a href="#">TIMELINE</a></li>
</ul>
</li>

<li class="common">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;COMMON<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">ERROR 404 PAGE</a></li>
<li><a href="#">ERROR 500 PAGE</a></li>
<li><a href="#">LOGIN PAGE</a></li>
<li><a href="#">SIGN UP PAGE</a></li>
<li><a href="#">FORGOT PASSWORD</a></li>
</ul>
</li>

<li class="additional-pages">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span>&nbsp;&nbsp;ADDITIONAL PAGES<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">E-COMMERCE</a></li>
<li><a href="#">E-COMMERCE BACKEND</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">PROJECT DETAIL</a></li>
<li><a href="#">CONTACTS</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">ALERTS</a></li>
<li><a href="#">GRID SYSTEM</a></li>
<li><a href="#">DRAGGABLE</a></li>
</ul>
</li>

</ul>

<div class="sidebar-footer hidden-small navbar-fixed-bottom">
<a title="Settings" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a title="FullScreen" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a title="Lock" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</a>
<a title="Logout" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>


</div>

<div class="content">

<h1>DASHBOARD</h1>

<p></p>

<div id="box">
<div class="box-top">NEWS</div>
<div class="box-panel">
Lorem ipsum dolor sit amet, has in molestie apeirian, at nostro maiestatis pro. Cu vim clita aperiri suscipiantur, usu soluta iuvaret definiebas ad, postea labitur quaerendum ex eam. Aperiri partiendo ea vix, ad ferri nobis nec. Consul quaeque facilis at quo, aliquid facilis adipiscing vel te.
</div>
</div>

</div>

</div>

</body>

<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/accordion.js"></script>
<script src="js/rotateChevron.js"></script>
<script src="js/general.js"></script>

</html>


Also why is the sidebar 100% when it should be 250px

CSS

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600,700");

*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body
{
font-family: 'Open Sans';
color: #ddd;
background-color: #2c3e50;
}

a, a:focus, a:hover, a:active
{
text-decoration: none;
outline: 0;
}

ul
{
list-style: none;
}

div#header
{
width: 100%;
height: 50px;
background-color: #2c3e50;
margin: 0 auto;
}

.logo
{
float: left;
margin-top: 10px;
margin-left: 16px;
}

.logo a
{
font-size: 1.3em;
color: #fff;
}

.logo a span
{
font-weight: 300;
}

div#container
{
width: 100%;
margin: 0 auto;
}

span.glyphicon
{
font-size: 16px;
color: #fff;
}

div#sidebar
{
width: 250px;
height: auto;
background-color: #2c3e50;
float: left;
}

ul.accordion li a
{
color: #ccc;
display: block;
padding: 8px;
}

.accordion li > .sub-menu
{
display: none;
}

.accordion li:target > .sub-menu
{
display: block;
}

.sub-menu
{
padding-left: 10px;
}

.sub-menu li a
{
color: #000;
}

div#content
{
width: auto;
margin-left: 250px;
height: 100%;
background-color: #95a5a6;
padding: 16px;
}

.content p
{
color: #424242;
font-size: 0.8em;
}


div#box
{
margin-top: 16px;
}

div#box .box-top
{
color: #fff;
background-color: #2c3e50;
padding: 5px;
padding-left: 16px;
}

div#box .box-panel
{
padding: 16px;
background-color: #fff;
}

a.mobile
{
display: block;
color: #fff;
background-color: #000;
text-align: center;
padding: 7px;
}

a.mobile:active
{
background-color: #4a4a4a;
}

@media only screen and (max-width: 320px)
{

.sidebar {
width: 100%;
display: none;
}

.content {
margin-left: 0px;
}

}

@media only screen and (min-width: 320px)
{

a.mobile {
display: none;
}

.sidebar {
height: 100%;
display: block;
}

}


JAVASCRIPT

$(document).ready(function () {
$('.glyphicon').click(function () {
$(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-right");
});
});


JAVASCRIPT II

$(document).ready(function() {

var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');

/* accordion_head.first().addClass('active').next().slideDown('normal'); */

accordion_head.on('click', function(event) {

event.preventDefault();

if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
} else {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
}

});

});


Also when I click the glyphicon it is replaced with another and visa versa and the accordion works well to but they don't work together as I intended.
Any help greatfully received.

ta!
Steven

Answer

You're using Bootstrap, but you're not using Bootstrap's methods - for the sidebar, I'd recommend using Bootstrap's grid system:

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <!-- MAIN CONTENT HERE -->
    </div>
    <div class="col-sm-3">
      <!-- Sidebar HERE -->
    </div>
  </div>
</div>

This will ensure the best level of responsive support using Bootstrap's CSS which you're already relying upon.

Comments