I need to hide the present div and show next hide
here is my codes
$(document).ready(function() {
$('#next').click(function() {
$(this).next().next().children("div").hide();
$(this).next().next().children("div").show();
});
});
#div2,
#div3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="prev">Prev</button>
<button id="next">Next</button>
<hr />
<div id="main">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</div>
DEMO
Look at this.
Handles start/end using css classes, kept js simple.
What about something like this?
$(document).ready(function() {
var currentDiv = 0;
$('#next').click(function() {
$('#div' + (currentDiv + 1)).hide();
currentDiv = (currentDiv + 1) % 3;
$('#div' + (currentDiv + 1)).show();
});
});
try something a little different
$(document).ready(function() {
$('#next').click(function() {
$eL=$('#main').children('div').filter(":visible");
$('#main').children().hide();
if($eL.next().length>0){
$eL.next().show();
}else{
$('#main div')[0].show();
}
});
$('#prev').click(function() {
$eL=$('#main').children('div').filter(":visible");
$('#main').children().hide();
if($eL.previous().length>0){
$eL.previous().show();
}else{
$('#main div')[$('#main div').length - 1].show();
}
});
});
edit: this function assumes one of the child divs is already visible when the page loads.
edit: added for previous button
Something like this (next and previous handled):
.item{
display:none;
}
var activeItem = 0;
function switchItem(isNext) {
if (isNext) {
activeItem++;
} else {
activeItem--;
}
activeItem = (activeItem == 3) ? 0 : activeItem;
activeItem = (activeItem == -1) ? 2 : activeItem;
showItem($("#main"), activeItem);
}
function showItem(selector, index) {
selector.find(".item").hide().eq(index).toggle();
}
<div id="main">
<div id="div1" class="item">Div 1</div>
<div id="div2" class="item">Div 2</div>
<div id="div3" class="item">Div 3</div>
</div>
Below is the code.
<ul class="grid">
<li class="object">
List Item 1<a class="show-next"> Show the next list item</a>
</li>
<li class="object">
List Item 2
<a class="show-next">Show the next list item</a>
</li>
<li class="object">
List Item 3
<a class="show-next">Show the next list item</a>
</li>
</ul>
Below is the script you should insert.
$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
$eL = $('.grid .object').filter(":visible");
// $(".grid").find(".object").hide().next().show();
if($eL.next().length>0){
$eL.next().show();
}else{
$('.grid .object')[0].show();
}
});
Related
I want to display one div at a time and hide other .
Need the same effect like:http://jsfiddle.net/cqDES/1552/
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>
If you don't want sliding effect use show()/hide()
$(() => {
$('div:not(#div0)').hide();
$('.nav-sidebar li').click(function () {
var index = $(this).index() + 1;
$(`div:not(#div${index})`).hide();
$(`#div${index}`).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>
You can use show()/hide() functions :
$(function() {
$('.nav-sidebar li').click(function() {
var index = $(this).index() + 1;
$('div:not(#div' + index + ')').hide();
$('#div' + index).show();
});
});
div[id^='div']
{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>
show function Documentation
hide function Documentation
I think this is what you are asking for.
JSFiddle
$(function() {
var panels = $('div').hide();
var tabs = $('.nav-sidebar li');
tabs.click(function(orgEvent) {
let clickedTabIndex = tabs.index(orgEvent.currentTarget);
panels.each((index, panel)=>{
$(panel)[index === clickedTabIndex ? "slideDown" : "slideUp"]();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li> elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>
I want to make menu toggle and one item from menu is open at a time. I am able to open one item at a time but unable to do toggle at the same time.
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function () {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
}
else {
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
}
.-arrow-link-content {
display:none;
}
.nav-active{ display:block;}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
if anyone have any suggestions.. please share.. Thanks in advance
For toggle to work, we need to get all the node with class name -arrow-link-content, and then remove the nav-active class first, then add nav-active to the selected item.
Check the snippet.
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function() {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
return false
}
var el = document.querySelectorAll('div.-arrow-link-content');
for (var i = 0; i < el.length; i++) {
if (el[i].classList.contains('nav-active')) el[i].classList.remove('nav-active');
}
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
.-arrow-link-content {
display: none;
}
.nav-active {
display: block;
}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
Since at most one element can be open at a time, we just have to look for that one elment and close it first if it exists, before we open an unopened element
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function () {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
}
else {
try {
// if an open element exists, close it first
this.parentNode.parentNode.querySelector('.nav-active').classList.remove('nav-active');
}
catch (error){
// Error occurs when no open elment exists, in that case: Do nothing
}
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
}
.-arrow-link-content {
display:none;
}
.nav-active{ display:block;}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
How can I compress my jQuery useful? I want to add a function to show an element when I hover another one. The function below is exactly what I want, but I want it more dynamic. Maybe with an data attribute?
var item_first = $('.item_first');
var item_second = $('.item_second');
var item_third = $('.item_third');
var item_fourth = $('.item_fourth');
var image_first = $('.image_first');
var image_second = $('.image_second');
var image_third = $('.image_third');
var image_fourth = $('.image_fourth');
$(document).ready(function () {
item_first.hover(function () {
image_first.addClass('active');
}, function () {
image_first.removeClass('active');
});
item_second.hover(function () {
image_second.addClass('active');
}, function () {
image_second.removeClass('active');
});
item_third.hover(function () {
image_third.addClass('active');
}, function () {
image_third.removeClass('active');
});
item_fourth.hover(function () {
image_fourth.addClass('active');
}, function () {
image_fourth.removeClass('active');
});
});
https://jsfiddle.net/gt5kw00q/
Sorry for my bad English. I try to write so that you understand it.
I would write the code like below.
$('img') will select all your images and apply the code to them on hover.
$('img').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
Based on your fiddle, try this approach
$( ".left__item" ).hover( function(){
$(".right__image").eq( $(this).index() ).addClass( "active" );
}, function(){
$(".right__image").eq( $(this).index() ).removeClass( "active" );
})
Demo
$(document).ready(function() {
$(".left__item").hover(function() {
$(".right__image").eq($(this).index()).addClass("active");
}, function() {
$(".right__image").eq($(this).index()).removeClass("active");
})
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>
Give your elements a class name and a data attribute with the target(id):
<div class="myHoverElement" id="ele1" data-targetid="image_1"></div>
<div class="myHoverElement" id="ele2" data-targetid="image_2"></div>
<img id="image_1">
<img id="image_2">
You can then bind a hover event to all those elements at once:
$('.myHoverElement').hover(
function() { $('#' + $(this).data('targetid')).addClass('active') },
function() { $('#' + $(this).data('targetid')).removeClass('active') }
);
$(this) is a reference to the currently hovered element.
Please find working solution below, enjoy :)
var items = {
item_first: 'image_first',
item_second: 'image_second',
item_third: 'image_third',
item_fourth: 'image_fourth'
}
$(document).ready(function() {
function addClass(key) {
$('.' + items[key]).addClass('active');
}
function removeClass(key) {
$('.' + items[key]).removeClass('active');
}
for (var key in items) {
$('.' + key).hover(addClass.bind(null, key), removeClass.bind(null, key))
}
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first active">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>
I have the following Dropdown List which is not the traditional SELECT and OPTION dropdown list. Using JQUERY, I am wanting to know if there is a way to perform an action when a given option is chosen. EX - When you click the dropdown and choose BIRDS, it will hide some DIV elsewhere on the page. Thank You
<section class="main">
<div class="wrapper">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>View By Category</span>
<ul class="dropdown">
<li><a>Dogs</a></li>
<li><a>Cats</a></li>
<li><a>Birds</a></li>
</ul>
</div>
</div>
</section>
https://jsfiddle.net/o8h4gvgd/5/
use something like this. I hope this will help you.
$(document).ready(function(){
$('.dropdown .bird').click(function(){
$('#section_1').toggle();
$('#section_1').hide();
});
});
$('div#dd ul.dropdown li a').on('click', function() {var clsName = $(this).parent().attr('name'); $("."+clsName).hide()});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<section class="main">
<div class="wrapper">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>View By Category</span>
<ul class="dropdown">
<li name='dogs'>Dogs</li>
<li name='cats'>Cats</li>
<li name='birds'>Birds</li>
</ul>
</div>
</div>
</section>
<div class='dogs'>Div with dogs info</div>
<div class='cats'>Div with cats info</div>
<div class='birds'>Div with birds info</div>
give a class to entries like;
<li><a class="item">Dogs</a></li>
<li><a class="item">Cats</a></li>
<li><a class="item">Birds</a></li>
then, use a click event like;
$(".item").click(function(){
item = $(this).text();
alert(item);
});
$('#dd ul.dropdown a').click(function() {
var _this = $(this);
var index = $('#dd ul.dropdown a').index(_this);
alert(index);
if (index === 2) {
alert(_this.text());
// ..do anything you want
}
$(document).ready(function () {
//Your function on what needs to be done on click
var liClicked = function(obj){
alert("You Clicked : "+$(obj).html());
}
//trigger the onclick based on selected -- in this case '#dd ul.dropdown li a'
$(document).on("click","#dd ul.dropdown li a", function(){
//call the above written function
liClicked(this);
});
});
I want to show only a particular div by calling a function though onclick event .At a time I just want to show a single div and rest all divs should not show in my web page. I have tried this through using display css property.I just want a single function which can handle this .I can do this question by making more than one function.
<html>
<head>
</head>
<body>
<ul>
<li>1</li><!-- show div1-->
<li>2</li><!-- show div2-->
<li>3</li><!-- show div3-->
</ul>
<div id="first">content 1</div>
<div id="second">content2</div>
<div id="third">content3</div>
</body>
</html>
How about this:
Each div needs the same class so you can find and hide them all at once.
The function needs to know the id of the div to show, so pass in the id.
See changes below:
<html>
<head>
</head>
<body>
<ul id="controls">
<li>1</li><!-- show div1-->
<li>2</li><!-- show div2-->
<li>3</li><!-- show div3-->
</ul>
<div id="first" class="content">content 1</div>
<div id="second" class="content">content2</div>
<div id="third" class="content">content3</div>
<script>
$("#controls a").click(function() {
someFunction($(this).attr("data-target"));
});
function someFunction(divId) {
$(".content").hide();
$("#" + divId).show();
}
</script>
</body>
</html>
Note: You need a reference to jQuery for the $ syntax to work.
FYI, you could do this with just CSS:
.panel {display: none}
.panel:target {display: block}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class='panel' id="first">content 1</div>
<div class='panel' id="second">content2</div>
<div class='panel' id="third">content3</div>
I think this is what you want:
<ul>
<li id="li_1">1
</li>
<li id="li_2">2
</li>
<li id="li_3">3
</li>
</ul>
<div class='panel' id="li_1_panel">content 1</div>
<div class='panel' id="li_2_panel">content2</div>
<div class='panel' id="li_3_panel">content3</div>
.panel {
display: none;
}
var panelID = "";
for (i = 1; i <= 3; i++) {
alert('#li_' + i);
$('#li_' + i).on('click', function () {
panelID = "#" + $(this).attr("id") + "_panel";
alert(panelID);
$(panelID).toggle();
});
}
Edit
Also, if you did not want to rely on a rigid naming scheme, you could use a hash.
<ul>
<li id="zeus">1
</li>
<li id="athena">2
</li>
<li id="hades">3
</li>
</ul>
<div class='panel' id="isis">content 1</div>
<div class='panel' id="thor">content 2</div>
<div class='panel' id="aphrodite">content 3</div>
var panelID = "";
var li_to_panel = {
"zeus": "isis",
"athena": "thor",
"hades": "aphrodite"
};
$.each(li_to_panel, function(key, value){
alert(key);
liID = "#" + key;
$(liID).on('click', function () {
panelID = "#" + li_to_panel[$(this).attr('id')];
alert(panelID);
$(panelID).toggle();
});
});