hy all, I am creating an accordion menu that when i press the " UNIT " tab, it opens up a list of " Chapters " tab, and when i press on any one of those chapters, a list of lessons opens up. Till now, i have managed to create all the appropriate lists, but in default, lessons and chapters are opened automatically, and the lessons elements when pressed do not scroll back up to the chapters parents. My html5 file:
<script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
});
</script>
<div id="container">
<div id="content">
<div id="sidebar">
<ul id="accordion">
<li>
Unit 1
<ul id="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
Unit 2
<ul id="accordion">
<li> Chapter 1 </li>
<ul id="accordion">
<li> Chapter 2
<ul id="accordion">
<li> Lesson 1 </li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
My acorjs.js file:
$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Any ideas??
My new edited file :
<div id="container">
<div id="content">
<div id="sidebar">
<ul class="accordion">
<li>
Unit 1
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
Unit 2
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
my JS file :
$(document).ready(function() {
$('ul.accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul.accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Please help everything stopped working
Try giving the ul elements unique ids. The ul for both Units and Chapters have "accordion" as the id. If the ids are not unique, the event function may be bound only to the first or last, but not all
Alternately, make "accordion" a class and not an id. Your jquery will then need to change to use "ul.accordion" instead of "ul#accordion".
Here's a snippet of the HTML showing the change:
<ul class="accordion">
<li>
Unit 1
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
And then the change to the javascript code:
$(document).ready(function() {
$('ul.accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul.accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Related
I have this DOM and I want to make like a filter removing li according text included in h5 tag.
<div class="total">
<ul>
<li>
<h5>this super heroe is super cool: Clark Kent</h5>
</li>
</ul>
<ul>
<li>
<h5>I always wanted to be Batman</h5>
</li>
</ul>
<ul>
<li>
<h5>Somedays I will be transform as Spiderman </h5>
</li>
</ul>
<ul>
<li>
<h5>This women is incredible Catwoman</h5>
</li>
</ul>
<li>
<ul>
<h5>The worst character is Joker</h5>
</ul>
</li>
<ul>
<li>
<h5>Someone knows about Green Lantern </h5>
</li>
</ul>
</div>
I need to make a filter according string into this array which has not coma
let appDataTab = ["Clark Kent Catwoman Joker"]
My goal is to remove all li that its h5 doesn't content "Clark Kent" "Catwoman" and "Joker"
As you can see the appDataTab content these string with no separation.
Here is the updated code after adding additional code after validating from my end.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="total">
<ul>
<li>
<h5>this super heroe is super cool: Clark Kent</h5>
</li>
</ul>
<ul>
<li>
<h5>I always wanted to be Batman</h5>
</li>
</ul>
<ul>
<li>
<h5>Somedays I will be transform as Spiderman </h5>
</li>
</ul>
<ul>
<li>
<h5>This women is incredible Catwoman</h5>
</li>
</ul>
<ul>
<li>
<h5>The worst character is Joker</h5>
</li>
</ul>
<ul>
<li>
<h5>Someone knows about Green Lantern </h5>
</li>
</ul>
</div>
<script>
$(function () {
var prohibited = ['Clark Kent', 'Catwoman', 'Joker'];
$("li").each(function (index) {
var wordFound = false;
for (var i = 0; i < prohibited.length; i++) {
if ($(this).text().indexOf(prohibited[i]) > -1) {
wordFound = true;
break;
}
}
if (wordFound == false) {
$(this).parent().remove();
}
});
})
</script>
</body>
</html>
Your should first make it a regular comma seperated array, then look for the element and remove the li containing the element.
Steps are commented one by one:
$(document).ready(function () {
//Your array
var appDataTab = ["Clark Kent Catwoman Joker"];
//Split with more than 1 space (2 space)
var appDataSplit = appDataTab[0].split(" ");
//Remove empty elements
var filtered = appDataSplit.filter(function (el) {
return el != "";
});
//Trim elements from extra spaces
var cleanFiltered = [];
for (i=0; i < filtered.length; i++){
cleanFiltered.push(filtered[i].trim());
}
console.log(cleanFiltered);
//look for any li containing the words in cleanFilter array
$("li").each(function(){
for (i=0; i < cleanFiltered.length;i++){
if ($(this).text().indexOf(cleanFiltered[i]) > -1) {
$(this).remove();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">
<ul>
<li>
<h5>this super heroe is super cool: Clark Kent</h5>
</li>
</ul>
<ul>
<li>
<h5>I always wanted to be Batman</h5>
</li>
</ul>
<ul>
<li>
<h5>Somedays I will be transform as Spiderman </h5>
</li>
</ul>
<ul>
<li>
<h5>This women is incredible Catwoman</h5>
</li>
</ul>
<ul>
<li>
<h5>The worst character is Joker</h5>
</li>
</ul>
<ul>
<li>
<h5>Someone knows about Green Lantern </h5>
</li>
</ul>
</div>
I have a menu with certain items and I want when a user clicks on any li than only its class becomes an active class. I have menu items like the following:
$(document).ready(function () {
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
alert(pgurl);
$(".nav li a").each(function () {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '') {
$(this).addClass("active");
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-9">
<nav class="nav-holder">
<div class="nav-footer">
<ul class="nav" id="navclk">
<li class="active">
Home
</li>
<li class="">
About
</li>
<li class="">
Car Rentals
</li>
<li class="">
Wedding Cars
</li>
<li class="">
Tempo Travellers
</li>
<li class="">
Tour Package
</li>
<li class="">
Coach
</li>
<li class="has-submenu">
Places
<ul class="submenu">
<li>Bhubaneswar</li>
<li>Puri</li>
<li>Konark</li>
<li>Chilika</li>
<li>Gopalpur</li>
<li>Cuttack</li>
<li>Bhitar Kanika</li>
<li>Daringbadi</li>
<li>Jajpur</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
It's not working with the drop-down menus while working perfectly with all other menus not having drop-down items. How can I change the code that it works too with menu items having a drop-down list of items? I am also using update panel on my page.
This could be done by the following code
CSS
.active {
/* your active CSS */
}
html
<ul>
<li onclick="activeMe(this)">1</li>
<li onclick="activeMe(this)">2</li>
<li onclick="activeMe(this)">3</li>
<li onclick="activeMe(this)">4</li>
</ul>
JavaScript
function activeMe(li) {
console.log(li.setAttribute("class", "active"));
}
``
Correct Answer!
<!--Menu Active-->
<script type="text/javascript">
$(document).ready(function () {
$('.nav li').removeClass('active');
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".nav li a").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).closest('li').addClass("active");
}
})
});
});
</script>
<!--Menu Active-->
I have multiple <li> elements. When I click to one of this, data from the chosen <li> should populate fields of form below. But my problem is when I click on the list of <li> tags it works from the second click.
<div class='js-delivery-addresses' id='delivery_addresses'>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</div>
Js code:
events: {
"click .js-delivery-addresses": "chosenAddress"
}
chosenAddress: function() {
...some code here;
$('#delivery_addresses li').unbind().on('click', function() {
...other code that works from second click;
})
}
I expect it will work from the first click.
Is this not much simpler ?
$(document).on("click","#delivery_addresses ul li",function(){
alert($(this).val() + " = " + $(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='js-delivery-addresses' id='delivery_addresses'>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</div>
Ok I am trying to create an accordance style menu with sub-menu in it but when I click the hamburger button, my secondary sub-menu also shows up by default. How to hide "list 2" when first click on the hamburger? I mean when click on hamburger only show "list 1" without showing "list 2" until you click on "list 1".
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$(".primary-list").slideToggle("fast");
});
});
$(document).ready(function() {
$(".primary-list").click(function() {
$(".standard-list").slideToggle("fast");
});
});
</script>
</head>
<body>
<button>☰</button>
<ul>
<li class="primary-list">list 1
<ul>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
</ul>
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
</ul>
</body>
</html>
Just add $(".standard-list").slideToggle("fast"); at first in the document.ready() function.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".standard-list").slideToggle("fast");
$("button").click(function() {
$(".primary-list").slideToggle("fast");
});
});
$(document).ready(function() {
$(".primary-list").click(function() {
$(".standard-list").slideToggle("fast");
});
});
</script>
</head>
<body>
<button>☰</button>
<ul>
<li class="primary-list">list 1
<ul>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
</ul>
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
</ul>
</body>
</html>
first - use just one $(document).ready();
second - use $(this)
3rd - its better to use .on(); its avoid any errors you will may facing
4th - you can use display: none; for your sub-menu css or add $(".standard-list").hide(); to hide your sub-menu on load
<script>
$(document).ready(function() {
$("button").on('click',function() {
$(".primary-list").slideToggle("fast");
});
$(".primary-list").on('click',function() {
$(this).find('ul').slideToggle("fast");
});
});
</script>
JSFIDDLE
The problem is that standard-list is inside of primary-list, so when you click on standard, you also click on primary. You need the class on something that is not wrapped around the standard list.
<li class="primary-list"><a class="toggle-standard" href="#">list 1</a>
<ul>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
</ul>
</li>
$(document).ready(function() {
$("button").click(function() {
$(".primary-list").slideToggle("fast");
});
});
$(document).ready(function() {
$(".toggle-standard").click(function() {
$(".standard-list").slideToggle("fast");
});
});
Fiddle: https://jsfiddle.net/Forklift/7w73otch/
I've taken the accordion menu from http://www.i-marco.nl/weblog/ and have customised it to what I need. One problem I have though is that I have a couple of submenu items which are also collapsible. The code I have works fine in terms of collapsing the menu, but I can't get it to retract this menu when the parent element is clicked. Can anyone see where i'm going wrong here?
Thanks in advance!
HTML snippet:
<ul class='menu collapsible' id='menu'>
<li id="home" class="selected expand top">
Home
</li>
<li id="about_the_school" class="top">
About the School<span>Click to expand</span>
<ul class='acitem'>
<li>
Welcome
</li>
</ul>
</li>
<li id="academic" class="top">
Academic<span>Click to expand</span>
<ul class='acitem'>
<li>
Curriculum & Exam System
</li>
<li>
Departments
<ul class='acitem menu collapsible'>
<li>
Art
</li>
<li>
Business Education
</li>
</ul>
</li>
<li>
Pupil Support
</li>
<li>
Careers
</li>
</ul>
</li>
</ul>
</ul>
JS:
jQuery.fn.initMenu = function(){
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(function(e){
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if (theElement.hasClass('acitem') && theElement.is(':visible')) {
if ($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal', function(){
$(this).prev().removeClass('active');
});
return false;
}
return false;
}
if (theElement.hasClass('acitem') && !theElement.is(':visible')) {
//custom - adds class at beginning of expansion
$(this).addClass('active');
$('.acitem:visible', parent).first().slideUp('normal', function(){
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function(){
$(this).prev().addClass('active');
});
return false;
}
});
});
};$(document).ready(function(){
$('.menu').initMenu();
});
On this section:
<a href="http://localhost//public_html/index.php/academic">Academic
<span>Click to expand</span>
</a>
<ul class='acitem'>
You need a collapsible class on that <ul> to get it to collapse as well, same the others, like this:
<ul class='acitem collapsible'>
You can see an updated/working demo with the fix here.