bootstrap nav bar toggling? - javascript

Below is my code for a nav-bar. Can someone please help me in activating the toggle button. It does not respond on click. I just want it to toggle the content of sidebar-wrapper. I want it to be completely visible and once I click on the button it should disappear and should come back once I hit the toggle button again. Am pretty new to this. Any help is appreciated.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" style="border:none;"><span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button></li>
</ul>
<div style="text-align: center; font-size: 20px; padding-top: 7px;">
<img src="images/logo.png">
<p style="display: inline"><b>Congress API</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: black">
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-stacked" id="menu">
<li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
<a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
</li>
<li onclick="showMainDivision('bills','legislate','committees','favourites')">
<a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
</li>
<li onclick="showMainDivision('committees','bills','legislate','favourites')">
<a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
</li>
<li onclick="showMainDivision('favourites','committees','bills','legislate');">
<a ng-click="getFavourites()" id="fav_load"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
</li>
</ul>
</div>
</div>
</div>
</div>

function toggleDIV(DIV)
{
if(document.getElementById(DIV).style.display=="none")
{
document.getElementById(DIV).style.display="block"
}
else
{
document.getElementById(DIV).style.display="none"
}
}
// use it like:
// onClick="toggleDIV('myDivName')";

Related

SideNav overlaps everything

I have two navigations. One sideNav and one navbar. The problem is that my sideNav overlaps everything. It's on top of the navbar and the footer. How can I move this under all of the layers? Here is an image to assist.. enter image description here I am using MVC with the navbar in my _layout.cshtml page, and the sidenav inside of my List.cshtml page.
SideNav
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-1 fixed">
<ul class="custom-scrollbar">
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Websites<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul class="list-unstyled">
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Sort By Category<i class="fas rotate-icon"></i>
</a>
<li>
For authors
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> Marketing<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
Introduction
</li>
<li>
Monthly meetings
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<li>
<ul class="social">
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-pinterest"> </i></li>
<li><i class="fab fa-google-plus-g"> </i></li>
<li><i class="fab fa-twitter"> </i></li>
</ul>
</li>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. Sidebar navigation -->
navbar
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="background-color: #4285f4">
<a class="navbar-brand font-weight-bold" asp-controller="Product" asp-action="List" id="navpadding"><strong>FIVEMANGO</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
#if (User.Identity.IsAuthenticated)
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Cart" asp-action="Index">
<i class="fas fa-shopping-cart blue-text"></i> Cart
</a>
</li>
<li class="nav-item dropdown ml-3">
<a class="nav-link dropdown-toggle waves-effect waves-light dark-grey-text font-weight-bold"
id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user blue-text"></i> Profile
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-cyan" aria-labelledby="navbarDropdownMenuLink-4">
#*<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Login">Login</a>*#
<a class="dropdown-item waves-effect waves-light" asp-controller="User" asp-action="Index">View Orders</a>
<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Logout">Log out</a>
</div>
</li>
</ul>
}
else
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Register">
<i class="fas fa-registered blue-text"></i> Sign Up
</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Login">
<i class="fas fa-user blue-text"></i> Login
</a>
</li>
</ul>
}
</div>
</nav>

sidebar toggle isn't working after table toggle in javascript

In my application a sidebar is there and it toggles when we click on it.Also I want to hide and show some table data but when I add code for this the sidebar doesnot toggle.May I know why this happened.
I want to hide table columns but when I did this my sidebar dropdown stops working.
This code is for sidebar toggle is working fine.
function goToUrl(id)
{
if(user_type_id!=3)
{
if(id==0)
{
$('.hideAndShow').toggle();
document.location="Doctor";//News
}
else
if(id==1)
{
$('.hideAndShow').toggle();
document.location="Device";//cases
}
if(id==2)
{
// $('#addJournals').toggle();
// $('#listingJournals').toggle();
$('.hideAndShow').toggle();
document.location="Associate";//journal
}
if(id==3)
{
$('.hideAndShow').toggle();
document.location="Patient";//gallery
}
}
else
{
if(id==0)
document.location="Doctor";
else
if(id==1)
document.location="Device";
if(id==2)
document.location="Associate";
else
if(id==3)
document.location="Patient";
}
}
<aside class="left-side sidebar-offcanvas" style="min-height: 260px;">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<!-- <div class="user-panel">
<div class="pull-left image">
<img src="img/avatar3.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p id="imageAdmin"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div> -->
<ul class="sidebar-menu">
<!-- <li id='dashboard'>
<a href="/dashboard">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li> -->
<li class='treeview' id='Doctor'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-stethoscope"></i>
<span onclick="goToUrl(0)">Manage Doctor</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDoctor?id=0" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/doctor?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='treeview' id='Device'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-mobile"></i>
<span onclick="goToUrl(1)">Manage Device</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDevice" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/device?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='active' id='Report'>
<a href="/reports">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-list-alt"></i>
<span>Reports</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
but when i add following code sidebar not toggle
$(document).ready(function(){
$("#hi").click(function(){
// $("p").hide();
$('td:nth-child(3)').hide();
});
$("#sh").click(function(){
// $("p").show();
$('td:nth-child(3)').show();
});
});
please help me.

bootstrap multiple dropdown menu not working as expected

So I'm trying to have multiple dropdowns menu on mobile, the dropdown content does appear however it doesn't show simultaneously like if I open one then open another one it should close the first one.
https://jsfiddle.net/4w2835o1/
<div class="container">
<div class="navbar navbar-fixed-top" role="navigation">
<ul class="mobile-nav">
<li>
<a href="#" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="true">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<li> </li>
<li><i class="fa fa-language" aria-hidden="true"></i></li>
<li><i class="fa fa-heart" aria-hidden="true"></i></li>
<li><i class="fa fa-user" aria-hidden="true"></i></li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Jobs</li>
<li>Career advice</li>
<li>Career advice</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" aria-expanded="true">
<form class="navbar-form navbar-left" role="search"> <div class="form-group">
<input type="text" class="form-control" placeholder="Search"> </div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>

Prevent Side Menu Collapse in Bootstrap

<div id="wrapper">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse collapse">
<ul class="nav" id="side-menu">
<li>
<a class="active" href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Operation <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<i class="fa fa-bar-chart-o fa-fw"> </i> Request<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<i class="fa fa-dashboard fa-fw"></i> Browse
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Add
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Hello,
I have a bootstrap (3) side menu who works great but I can't understand why third level collapse (and with him his parent) on click.
I'd like to prevent his collapse and make it works like the second level.
Any suggestions?
Thanks.

Convert Dropdown Accordion to Slideout Menu by adding toggle_class()

I have a menu built using Bootstrap 3.0. It floats to the left and can be re-sized to fit only the icons by adding a css class to it using jQuery's toggle_class(). What I want to achieve is once this menu is toggled to a smaller version, I would like the drop down menu to become a vertical slide out menu.
Here is an example of what I am trying to accomplish http://wrapbootstrap.com/preview/WB0B30DGR If there is a plugin that does please point me to it.
Here is my HTML code:
<div id="wrap">
<div id="content">
<div id="navigation" class="" role="navigation">
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
</button>
<a class="navbar-brand" href="./">CIMP Admin</a>
</div>
<!--SIDENAV
============================================= -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active" ><i class="fa fa-dashboard"></i> Dashboard</li>
<li class="dropdown ">
<i class="fa fa-camera"></i> Media <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-picture-o"></i> Library</li>
<li><i class="fa fa-picture-o"></i> Albums</li>
<li><i class="fa fa-picture-o"></i> Slideshows</li>
</ul>
</li>
<!-- Modules -->
<li class="dropdown ">
<i class="fa fa-puzzle-piece"></i> Modules <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-thumb-tack"></i> Posts</li>
<li><i class="fa fa-cloud"></i> Uploads</li>
<li><i class="fa fa-desktop"></i> Testimonials</li>
</ul>
</li>
<li><i class="fa fa-users"></i> Users</li>
<li calss="active"><a id="toggle-pane" href="#"><i class="fa fa-caret-square-o-left"></i> Hide Menu Bar</a></li>
</ul>
</div>
</nav><!--/ nav -->
</div><!--/ navigation -->
</div><!--/ content -->
</div><!-- wrap -->
<script type="text/javascript">
$("#toggle-pane").click(function () {
$('#wrap').toggleClass("folded");
});
</script>

Categories

Resources