JQuery each function toggle class - javascript

So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...

You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE

jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.

Related

Add element after specific list item

I have a list of tabs set up like this. All tabs have a class tab_<number> and the active tab also has an extra class tab_active
Below these tabs there is a div that shows the dynamic content based on which tab is active
<div class="tab_content">xxx</div>
What I'm trying to do is insert the div tab_content below the active tab.
This works, but only on the second click on the tab, which I don't understand why.
The second script I tried, was looping through the different tabs and trying to insert the div like this, but this only works on the last item, because it just loops through it.
/*
// I tried two solutions, this was my first
jQuery(".tabs li").click(function() {
jQuery(".tab_content").insertAfter(jQuery(".tab_active"));
});
*/
// second
var i;
for (i = 0; i < jQuery('.tabs li').length - 1; i++) {
jQuery(".tab_" + i).click(function() {
jQuery(".tab_content").insertAfter(jQuery(".tab_" + i));
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab_0 tab_active">1</li>
<li class="tab_1">2</li>
<li class="tab_2">3</li>
<li class="tab_3">4</li>
<li class="tab_4">5</li>
</ul>
<div class="tab_content">xxx</div>
Can you guys/gals see what I'm doing wrong?
Much appreciated!
this can be done in something like following way.
Note though that if there are more tab_* elements in page then update the selector to be more stricter as needed to prevent selecting unexpected element.
$("[class^=tab_]").click(function(){
$(this).append($(".tab_content"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab_0 tab_active">1</li>
<li class="tab_1">2</li>
<li class="tab_2">3</li>
<li class="tab_3">4</li>
<li class="tab_4">5</li>
</ul>
<div class="tab_content">xxx</div>

change active class of ul list using anchor tag click

I am trying to add or remove active class for list element by clicking the link inside it.
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
$('.btn1').click(function() {
$( "#l1" ).addClass( "active" );
$( "#l2" ).removeClass( "active" );
window.open ('/one');
});
$('.btn2').click(function() {
$( "#l2" ).addClass( "active" );
$( "#l1" ).removeClass( "active" );
window.open ('/two');
});
My html and css classes as above. But it doesn't work as expected. So anyone know how to resolve it?
$('.btn').click(function() {
$('.btn').closest('li').removeClass("active")
$(this).closest('li').addClass("active")
console.log($(this).data("url"))
})
li.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
My HTML and CSS classes as above
Basically, your code works well. You need to add CSS like .active{ color:red;}.
However, listen to the event click for each button is not a good thing to do. Imagine you have about 10/100/1000 button then you have to Copy/Pase code like this?
You should keep in mind that: Don't repeat yourself.
So as a result, I've refactored code for you like below. Cheers!
$('.btn').click(function() {
$('.btn').closest('li').removeClass("active");
$(this).closest('li').addClass("active");
var content = $(this).data('value');
$("#content").html(content);
});
.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
<div id="content" style="width:100px; height: 100px">
</div>
Edit
Basically, you should get content then assign it to div content below instead of navigating. If you still want to navigate, you should store your data by using localStorage
Try:
$(".btn1").click(function(){
$("ul li").removeClass('active');
$("#l1").toggleClass('active');
window.open ('/one');
});
Note line 2
// will remove class active from all bullets in all list add a #id to the selector to specify a specific list.
// One click handler for all buttons/links.
$('.btn').click(function(event) {
// Remove class from all buttons.
$('.btn').parent().removeClass('active');
// Get the specific button that was clicked.
var btn = $(this);
// Add active class to it's parent.
btn.parent().addClass('active');
//open from the data-link attribute on the link.
// though, window.open will probably be blocked by the browser popup blocker.
window.open(btn.attr('data-link'));
});
.active {
background-color: #ff0000;
}
a.btn {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<!-- you could save where to link to in a data attribute, though I am not sure why you wouldn't just have it in href -->
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>

Why does my accordion list keep closing?

I've created a side menu that contains accordion list. When I load the page, the accordion list has one section open because it's coded to be active on page load. However if I attempt to open another section... it opens the section but then closes straight away. Can someone tell me where I'm going wrong?
List code:
<ion-content class="has-header" id="accordian"scroll="false" ng-controller="MainCtrl">
<ul>
<li class="active">
<h3><span class="icon-dashboard"></span>Group 1</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
<!-- we will keep this LI open by default -->
<li>
<h3><span class="icon-tasks"></span>Group 2</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Group 3</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
</ul>
JS:
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
You must wait until the execution of the slideUp function is completed (by default the duration is 400ms) before you test if the next element is visible or not.
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
var $elemH3 = $(this);
setTimeout(function() {
if(!$elemH3.next().is(":visible"))
{
$elemH3.next().slideDown();
}
}, 401);
})
})
You can use some CSS to do this easily see this example : http://jsfiddle.net/nx2LkoLd/
You hide all sections but not the active one :
css code
li.active ul {
display:block;
}
li ul {
display: none;
}
The js and html code still the same.
Hope it's clear and will help you resolve your problem.
Default position of accordion is collapsed... put this on the begining of your $(document).ready to expand it.
$('#accordian').collapse({toggle: true});
EDIT:
In your case:
$(document).ready(function(){
$('#accordian').collapse({toggle: true});
});
Or... if you want your accordion expands independent of the ready event you can put this line anywhere in your js file (except inside another function):
$(function () { $('#accordian').collapse({toggle: true}); });
Both will work, but I'm not sure if your own functions are working, so be careful. I'm sorry, no time to test. ;)

Trigger event with same ID elements

I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks
As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo
you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});

JQuery to find next class in unordered list

I am using JQuery/Ajax for some functionality on my site. Currently I have a left side that displays an unordered list and each list element has a class of something like shop-thumb, Whenever some clicks on a shop-thumb then on the right that content is loaded with Ajax.
Now I want to incorporate a next/previous button so users can click next (from the right side) and the next list item is loaded with the ajax changing the content on the right.
Here is a really basic version of what I am working with:
<div class="thumbs">
<ul class="products">
<li class="shop-thumb"><img src="www.google.com/image1" /></li>
<li class="shop-thumb"><img src="www.google.com/image2" /></li>
<li class="shop-thumb"><img src="www.google.com/image3" /></li>
<li class="shop-thumb"><img src="www.google.com/image4" /></li>
<li class="shop-thumb"><img src="www.google.com/image5" /></li>
</ul>
</div>
<div class="paginate">
<div class="prev">Prev</div> | <div class="next">Next</div>
</div>
<div class="main">
<!-- Ajax comes in here -->
</div>
Here is what I have in my JQuery/Ajax calls -- Everything is working fine except the .next click function:
<script>
jQuery(document).ready(function($){
var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");
$(".main").load(defaultValue);
$("ul.products li.shop-thumb a").click(function(e){
e.preventDefault();
var addressValue = $(this).attr("href");
$(".main").load(addressValue);
});
$(".next").click(function() {
$("ul.products").next();
var newValue = $("ul.products .shop-thumb a").attr("href");
$(".main").load(newValue);
});
});
</script>
Any help would be appreciated on how I can achieve this next/previous functionality. Thought I should be using .next(), .find() or .nextAll
If you wouldn't mind throwing me a bone and showing me an example so I can see where and what I did wrong.
You need to have a marker for the current item to find out what is the next item. Once you find the next item, you can just fire the click event on that item to invoke the handler
You can use a class like
jQuery(document).ready(function ($) {
$("ul.products li.shop-thumb a").click(function (e) {
e.preventDefault();
var addressValue = $(this).attr("href");
$(".main").load(addressValue);
//remove the active class from previous item
$("ul.products li.active").removeClass('active');
//add the active class to the current li element
$(this).closest('li').addClass('active');
});
$(".next").click(function () {
//find the next item and trigger the click event
$("ul.products li.active").next().find('a').trigger('click');
});
//default loading
$("ul.products li.shop-thumb a:first").click();
});

Categories

Resources