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.
Related
I currently have a significant amount of HTML inside a div which is generated within an iteration from a GET request to my .net core server.
Some of the values in the HTML is dynamic data returned from the server.
I've added a button to my website, which when pressed, makes an AJAX call to the server to return a JSON object representing the dynamic values for the next iteration.
So, I would like the JavaScript to add a new div to the DOM, which is the same, and has my dynamic values populated based on the JSON response.
For context, the DIV looks like this (which is from a bootstrap template I purchased):
<div class="card">
<!-- Card header START -->
<div class="card-header border-0 pb-0">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<!-- Avatar -->
<div class="avatar me-2">
<img class="avatar-img rounded-circle" src="#post.ProfileImageUrl" alt="profile picture">
</div>
<!-- Info -->
<div>
<div class="nav nav-divider">
<h6 class="nav-item card-title mb-0"> #post.ProfileName </h6>
<span class="nav-item small"> #post.PostTime</span>
</div>
</div>
</div>
<!-- Card feed action dropdown START -->
<div class="dropdown">
<a href="#" class="text-secondary btn btn-secondary-soft-hover py-1 px-2" id="cardFeedAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots"></i>
</a>
<!-- Card feed action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardFeedAction">
<li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark fa-fw pe-2"></i>Save post</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-person-x fa-fw pe-2"></i>Unfollow lori ferguson </a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-x-circle fa-fw pe-2"></i>Hide post</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-slash-circle fa-fw pe-2"></i>Block</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-flag fa-fw pe-2"></i>Report post</a></li>
</ul>
</div>
<!-- Card feed action dropdown END -->
</div>
</div>
<!-- Card header END -->
<!-- Card body START -->
<div class="card-body">
<p><strong>#post.PostBody</strong></p>
<!-- Card img -->
<img class="card-img img-fluid" src="#post.PostImageUrl" alt="Post">
<!-- Feed react START -->
<ul class="nav nav-stack py-3 small">
<li class="nav-item">
<a class="nav-link active" href="#!"> <i class="bi bi-hand-thumbs-up-fill pe-1"></i>Liked (56)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!"> <i class="bi bi-chat-fill pe-1"></i>Comments (12)</a>
</li>
<!-- Card share action START -->
<li class="nav-item dropdown ms-sm-auto">
<a class="nav-link mb-0" href="#" id="cardShareAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-reply-fill flip-horizontal ps-1"></i>Share (3)
</a>
<!-- Card share action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardShareAction">
<li><a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-2"></i>Send via Direct Message</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-2"></i>Bookmark </a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-link fa-fw pe-2"></i>Copy link to post</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-2"></i>Share post via …</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-pencil-square fa-fw pe-2"></i>Share to News Feed</a></li>
</ul>
</li>
<!-- Card share action END -->
</ul>
</div>
<!-- Card body END -->
<!-- Card footer START -->
<div class="card-footer border-0 pt-0">
<!-- Load more comments -->
<a href="#!" role="button" class="btn btn-link btn-link-loader btn-sm text-secondary d-flex align-items-center" data-bs-toggle="button" aria-pressed="true">
<div class="spinner-dots me-2">
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
</div>
Load more comments
</a>
</div>
<!-- Card footer END -->
</div>
<!-- Card feed item END -->
Question:
There's a lot of HTML here. What's the best way to build this out in Javascript? Is it just a case of biting the bullet and writing all of the JS code to create each element/class?
Would this be the best practice? Because it effectively means I'm maintaining the HTML markup in two places..
Thank you..!
I usually save the html of the template to be rendered inside an hidden element. Then I can always access it using that element.innerHTML. You could use specialized script tag instead. But the innerHTML part is the same.
After having the HTML as string you have 2 options
build the string with the values you want to populate, then add that as innerHTML to the target container.
but a better approach is to create an element from that html (see function below) then append it and manipulate it otherwise.
// render 5 cards
for (var i = 0; i < 5; i++) {
var html = document.querySelector("#card-template").innerHTML;
var elem = elemFromString(html)
// change something
elem.querySelector(".card-body>p strong").innerText = "card " + i
// append
document.querySelector("#container").append(elem)
}
// usefull utility
function elemFromString(html) {
var dummy = document.createElement("div");
dummy.innerHTML = html.trim();
if (dummy.children.length > 1) {
console.error("expecting one wrapping element for html. will return only firstChild")
}
var result = dummy.firstChild;
result.parentNode.removeChild(result)
return result;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div id="container">
</div>
<div id="card-template" style="display:none">
<div class="card">
<!-- Card header START -->
<div class="card-header border-0 pb-0">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<!-- Avatar -->
<div class="avatar me-2">
<img class="avatar-img rounded-circle" src="#post.ProfileImageUrl" alt="profile picture">
</div>
<!-- Info -->
<div>
<div class="nav nav-divider">
<h6 class="nav-item card-title mb-0"> #post.ProfileName </h6>
<span class="nav-item small"> #post.PostTime</span>
</div>
</div>
</div>
<!-- Card feed action dropdown START -->
<div class="dropdown">
<a href="#" class="text-secondary btn btn-secondary-soft-hover py-1 px-2" id="cardFeedAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots"></i>
</a>
<!-- Card feed action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardFeedAction">
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-bookmark fa-fw pe-2"></i>Save post</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-person-x fa-fw pe-2"></i>Unfollow lori ferguson </a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-x-circle fa-fw pe-2"></i>Hide post</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-slash-circle fa-fw pe-2"></i>Block</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-flag fa-fw pe-2"></i>Report post</a>
</li>
</ul>
</div>
<!-- Card feed action dropdown END -->
</div>
</div>
<!-- Card header END -->
<!-- Card body START -->
<div class="card-body">
<p><strong>#post.PostBody</strong></p>
<!-- Card img -->
<img class="card-img img-fluid" src="#post.PostImageUrl" alt="Post">
<!-- Feed react START -->
<ul class="nav nav-stack py-3 small">
<li class="nav-item">
<a class="nav-link active" href="#!"> <i class="bi bi-hand-thumbs-up-fill pe-1"></i>Liked (56)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!"> <i class="bi bi-chat-fill pe-1"></i>Comments (12)</a>
</li>
<!-- Card share action START -->
<li class="nav-item dropdown ms-sm-auto">
<a class="nav-link mb-0" href="#" id="cardShareAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-reply-fill flip-horizontal ps-1"></i>Share (3)
</a>
<!-- Card share action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardShareAction">
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-2"></i>Send via Direct Message</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-2"></i>Bookmark </a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-link fa-fw pe-2"></i>Copy link to post</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-2"></i>Share post via …</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-pencil-square fa-fw pe-2"></i>Share to News Feed</a>
</li>
</ul>
</li>
<!-- Card share action END -->
</ul>
</div>
<!-- Card body END -->
<!-- Card footer START -->
<div class="card-footer border-0 pt-0">
<!-- Load more comments -->
<a href="#!" role="button" class="btn btn-link btn-link-loader btn-sm text-secondary d-flex align-items-center" data-bs-toggle="button" aria-pressed="true">
<div class="spinner-dots me-2">
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
</div>
Load more comments
</a>
</div>
<!-- Card footer END -->
</div>
<!-- Card feed item END -->
</div>
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>
My jQuery Breadcrumb
Breadcrumb = $(e.target).parentsUntil(".Menu").filter("li").children("a").map(function() {
return $(this).html().trim().replace(/Master Dashboard/g,"Dashboard");
}).get().reverse().join("<li><i class=\"fa fa-arrow-right\"></i></li>");
Returns
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
<span class="Arrow"></span>
<li><i class="fa fa-arrow-right"></i></li>
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
<span class="Arrow"></span>
<li><i class="fa fa-arrow-right"></i></li>
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
<span class="Counter">1,234</span>
Needs To Be
<li>
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
</li>
Question
I've tried several ways to .wrap("<li></li>") and to remove unwanted <span>...</span>'s from my breadcrumb however all have resulted in breaking my script.
How do I achieve my 'Needs To Be' by:
Remove all span.Arrow and span.Counter
Wrap each section in <li></li>
Live Demo
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
var Breadcrumb;
if ($(e.target).closest($('.Menu')).length) {
Breadcrumb = $(e.target).parentsUntil(".Menu").filter("li").children("a").map(function() {
return $(this).html().trim().replace(/Master Dashboard/g,"Dashboard");
}).get().reverse().join("<li><i class=\"fa fa-arrow-right\"></i></li>");
console.log(Breadcrumb);
};
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="SideNav">
<!-- === Navigation Menu Starts === -->
<ul class="Menu">
<!-- === Minified Nav Starts === -->
<li class="MinifySideBar" style="display: none;">
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-list-ul fa-2x"></i>
</a>
</li>
<!-- === Minified Nav Ends === -->
<!-- === Main Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-home fa-2x"></i>
<span class="Title">Master Dashboard</span>
</a>
</li>
<!-- === Main Dashboard Ends === -->
<!-- === User Account Starts === -->
<li>
<a href="javascript:;" data-title="Account">
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu First">
<!-- === User Account Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<i class="fa fa-home fa-lg"></i>
<span class="Title">Dashboard</span>
</a>
</li>
<!-- === User Account Dashboard Ends === -->
<!-- === User Messages Starts === -->
<li>
<a href="javascript:;" data-title="Account/Messages">
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<i class="fa fa-plus fa-lg"></i>
<span class="Title">Compose</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Inbox">
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
<span class="Counter">1,234</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Drafts">
<i class="fa fa-pencil-square-o fa-lg"></i>
<span class="Title">Drafts</span>
<span class="Counter">123</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Trash">
<i class="fa fa-trash fa-lg"></i>
<span class="Title">Trash</span>
<span class="Counter">12</span>
</a>
</li>
</ul>
</li>
<!-- === User Messages Ends === -->
</ul>
</li>
</ul>
</div>
UPDATE with document click
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
var Breadcrumb;
if ($(e.target).closest($('.Menu')).length) {
Breadcrumb = $(e.target).parentsUntil(".Menu").find('li a').map(function() {
var el = $(this); // remove second span
$(el).find('span.Counter,span.Arrow,i').remove();
$(el).prepend("<i class=\"fa fa-arrow-right\"></i>");
var tx = $(el).html().replace(/Master Dashboard/g,"Dashboard").replace(/\t/g, "")
var out = "<li>" + tx + "</li>";
return out;
}).get().reverse();
console.log(Breadcrumb);
};
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
<!-- === Navigation Menu Starts === -->
<ul class="Menu">
<!-- === Minified Nav Starts === -->
<li class="MinifySideBar" style="display: none;">
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-list-ul fa-2x"></i>
</a>
</li>
<!-- === Minified Nav Ends === -->
<!-- === Main Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-home fa-2x"></i>
<span class="Title">Master Dashboard</span>
</a>
</li>
<!-- === Main Dashboard Ends === -->
<!-- === User Account Starts === -->
<li>
<a href="javascript:;" data-title="Account">
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu First">
<!-- === User Account Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<i class="fa fa-home fa-lg"></i>
<span class="Title">Dashboard</span>
</a>
</li>
<!-- === User Account Dashboard Ends === -->
<!-- === User Messages Starts === -->
<li>
<a href="javascript:;" data-title="Account/Messages">
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<i class="fa fa-plus fa-lg"></i>
<span class="Title">Compose</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Inbox">
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
<span class="Counter">1,234</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Drafts">
<i class="fa fa-pencil-square-o fa-lg"></i>
<span class="Title">Drafts</span>
<span class="Counter">123</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Trash">
<i class="fa fa-trash fa-lg"></i>
<span class="Title">Trash</span>
<span class="Counter">12</span>
</a>
</li>
</ul>
</li>
<!-- === User Messages Ends === -->
</ul>
</li>
</ul>
</div>
this one outputs correct html for you:
see if it's ok now, cheers k
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')";
My code for a 2 level menu goes like this:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
</a>
</li>
</ul>
</li>
<ul>
Now I want to select the span with id=destruct, which is at level 1 and on click remove entire html in the li (including the second level ul tag). You must have got it that I am trying to make a "X", upon clicking which the menu item and any sub-menu item deletes.
However, I need your help in selecting the correct elements. For only Level 1 menu, the following jQuery code works:
$(".destruct").click(function(e){
$(this).parent().remove();
});
What could be the correct selector for Level 2 menu? I tried a few options like nth children and all, but cant seem to get it right.
You have this: li > a > span, so if you start in the span, you should look at the parent of the parent, of what is best, search for the closest "li" (because yo can change your html structure inside li's without tuch your jquery code). With a change in the html (add the x in all levels) you can get what #Juan suggested:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
<span class="destruct" style="float:right">X</span>
</a>
</li>
</ul>
</li>
<ul>
$(function () {
$(".destruct").click(function() {
$(this).parent().parent().remove();//first option
$(this).closest('li').remove();//best option
});
});
Working example: http://codepen.io/anon/pen/ZGaGby