I need some help making jQuery click and toggle function being simplified.
JS FIDDLE
This is what I have:
HTML
<div class="category-list-content">
<h4><strong>Category</strong></h4>
<ul class="category-list">
<li class="">
Company
</li>
<li class="">
Industry
</li>
<li class="">
Job Title
</li>
<li class="">
Tenure
</li>
<li class="">
Seniority Level
</li>
</ul>
</div>
ABOVE are my main category list
<div class="category-list-sub-content">
<h4><strong>Sub Category</strong></h4>
<ul class="segmentation-list ">
<p>Company</p>
<li class="">9lenses</li>
</ul>
<ul class="category-list ">
<p>Industry</p>
<li class="">Avation</li>
<li class="">Software</li>
<li class="">Mobile</li>
<li class="">Cars</li>
</ul>
<ul class="category-list">
<p>Job Title</p>
<li class="">UI Developer</li>
<li class="">UX Developer</li>
<li class="">Designers</li>
<li class="">Web Developers</li>
</ul>
<ul class="category-list">
<p>Tenure</p>
<li class=""> 5 years</li>
<li class="">< 5 years</li>
<li class="">> 5 years</li>
<li class="">10 years</li>
<li class="">1 year</li>
</ul>
<ul class="category-list ">
<p>Seniority Level</p>
<li class="">Team Lead</li>
<li class="">Juniour Employee</li>
<li class="">Intern</li>
<li class="">Director</li>
<li class="">CEO</li>
</ul>
</div>
This are sub-category list.
I was wanting to make something like when I click on the Company Sub category of Company will show and other sub-categories remain hidden. and when I click on the Industry , Industry subcategory will show and other will be hidden. Same goes for every category. Something like tab effect. I can do this by adding classes on each categories and sub-categories and giving .show() and .hide() functions. but it will huge to add unique classes. Also I may add more categories and sub categories later. So is there any good way to make this work how I describe ? If you need to alter(add any class or ID) anything to make this work that will be fine.
Any help will be appreciated. I am really suffering with this.
What you can do is setting a #hash in every tag of you category menu like:
<li class="">
Company
</li>
Set the id corresponding on in your "main category list" like :
<ul class="segmentation-list " id="company">
<p>Company</p>
Then set an event on each tag, detect the #hash and show only the right div. A little research on something called the web could have helped you. I'm not gonna give you the complete code, try doing it yourself if you don't want other downvoting your question.
Related
I am using the code from - jsfiddle
And I modified the code similar to -
<body>
<ul>
<li onclick="toggle('Items')"><b>Items</b></li>
<ul id="Items" style="display:none">
<!-- skeleton start -->
<li onclick="toggle('Item1')"><b>Item1</b></li>
<ul id="Item1" style="display:none">
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<li onclick="toggle('Items5')"><b>Items5</b></li>
<ul id="Items5" style="display:none">
<li>Item6</li>
<li>Item7</li>
</ul>
<li onclick="toggle('Items8')"><b>Items8</b></li>
<ul id="Items8" style="display:none">
<li onclick="toggle('Items9')"><b>Items9</b></li>
<ul id="Items9" style="display:none">
<li>Items10</li>
</ul>
<li onclick="toggle('Items11')"><b>Items11</b></li>
<ul id="Items11" style="display:none">
<li>Items12</li>
</ul>
<li>Items13/li>
</ul>
</ul>
</ul>
<ul>
<li onclick="toggle('newitems')"><b>Items-New</b></li>
<ul id="newitems" style="display:none">
<!-- skeleton start -->
<li onclick="toggle('NewItem1')"><b>New Item1</b></li>
<ul id="NewItem1" style="display:none">
<li>NewItem2</li>
<li>NewItem3</li>
<li>NewItem4</li>
</ul>
</ul>
</ul>
</body>
But the problem is that at times it works and at times, it doesn't. I am able to expand collapse Items and sub items properly while sometimes it doesn't respond. I have no clue as why is it not working every time. At times, New Items doesn't expand and at times it does. Any help is much appreciated.
please visit here , click on Java, Environment Setup doesn't seem to work all the time. If you click on Introduction to Java, it starts working.
this element in your page cover your Environment Setup element
<div class="vbox wb_container" id="wb_footer"> </div>
Say I have a menu that goes 4 to 5 levels deep. In most cases, selecting the menu will open up the same. Here is some html:
<div class="container">
<div class="trigger">Click Here</div>
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li>
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
</div>
How can I make it so that if you click on "Third", and you go to that page, that when you get to that page and click on the menu again, that it will open up showing the "Third" title at the top with its children instead of opening it up like it would normally do?
If the page is loaded (after kicking a link)
you need to indicate first which page has been loaded for example: blah3.aspx or blah4.aspx
Then in Order to rearange the list, u must get the html content of the list-item that should be shown on top menu.
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li id="page3">
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
Example here if page 3 has been loaded:
Get inner html content:
var treeStructure = $("#page3").html;
Remove the list-item from list with the jQuery remove method:
$("#page3").remove();
Add saved content to the beginning of the list with the jQuery prepend method:
$(".menu ul").prepend("<li>" + treeStructure + "</li>");
I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.
I have a navigation on my site where the last link opens a modal.
Scrollspy is working fine but I don't want it to highlight the last element that opens the modal in any case.
Is there any way to do so?
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
Kontakt
</li>
</ul>
</nav>
I've found a solution without adding extra markup, but this is not so beautiful.
The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted.
I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version.
A solution for your problem may be :
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
<a data-toggle="modal" data-target="#contact">Kontakt</a> <!-- See http://getbootstrap.com/javascript/#modals-usage -->
</li>
</ul>
</nav>
I want to do a dropdown menu vertical with a twitter bootstrap. My dropdown links are a same class CSS. But when I choose one if them, the two dropdown links slide.
Thanks for your help.
<ul class="nav nav-list">
<li class="nav-header">Ac</li>
<li class="nav-header main">Pla
<ul>
<li class="nav-subheader">Qua</li>
<li class="nav-subheader">Qua1</li>
<li class="nav-subheader">Qua2</li>
</ul></li>
<li class="nav-header main">Proj
<ul>
<li class="nav-subheader">Sou</li>
<li class="nav-subheader">Sou1</li>
<li class="nav-subheader">Sou2</li>
<li class="nav-subheader">Sou3</li>
</ul></li>
<li class="nav-header">Cen</li>
<li class="nav-header">Mes</li>
</ul>
You're missing a few key classes and information.
See the jFiddle I've created:
http://jsfiddle.net/KhCrm/
Make sure you have included the relevant JS/CSS (The only 2 needed to make this work really are dropdown.js, and the bootstrap.css.