Sorry if this is a really obvious problem to solve. What I am trying to do is have a div, when selected is replaced with another div with the option to revert "back" to the old div when "back" is clicked.
This is what I have so far:
$(document).ready(
function() {
$("#display-one").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One</div>
</div>
<div id="display-two">
<p>Display Two</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
Here is a JSFiddle: https://jsfiddle.net/uL8z87r7/1/
Thanks in advance for any help and tips!
-John
Just add #back a to your selector so it will be $("#display-one, #back a")
$("#display-one, #back a").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One
</div>
</div>
<div id="display-two">
<p>Display Two
</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
You have to add listener for the back button
$(document).ready(
function() {
$("#display-one,#back").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
});
$(document).ready(function() {
$("#display-one, #back").click(function() {
$("#display-one, #display-two").fadeToggle();
});
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One</div>
</div>
<div id="display-two">
<p>Display Two</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
Related
I'm testing a pagination type where the buttons are on a separate div from the target.
When I try to toggle the next div of the body, all of them are toggling, instead of just one.
$('#next_q').on('click', function(){
$('.question-item').hide().next('.question-item').show();
})
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
use :visible to select the question-item that is currently visible
$('#next_q').on('click', function(){
$('.question-item:visible').hide().next('.question-item').show();
})
also if you want it not to "skip" past the last element, use
if ($('.question-item:visible').prev('.question-item').length)
$('#next_q').on('click', function() {
if ($('.question-item:visible').next('.question-item').length)
$('.question-item:visible').hide().next('.question-item').show();
})
$('#prev_q').on('click', function() {
if ($('.question-item:visible').prev('.question-item').length)
$('.question-item:visible').hide().prev('.question-item').show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>
You can use .data() to store an integer reflecting an index of the .question-item elements .length, use ++ and % operators to cycle the indexes passed to .eq() from current index or 0 through .question-items .length
$('#next_q')
.data({
"index": 0,
items: $(".question-item")
})
.on("click", function() {
$(this).data().items
.hide()
.eq(++$(this).data().index % $(this).data().items.length)
.show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
Check the current visible .question-item and hide it and then show the next .question-item. I also added the not last-child selector since I thought that you might want to stop at the last question.
$('#next_q').on('click', function(){
$('.question-item:visible:not(:last-child)').hide().next('.question-item').show();
});
$('#prev_q').on('click', function(){
$('.question-item:visible:not(:first-child)').hide().prev('.question-item').show();
});
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>
I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>
My markup like this:--
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
I want when I click the button it clone only one closest siblings and insert the clone div after the last siblings within relative parent div.wrap. I know how to clone with jQuery but I couldn't insert the cloned div after last siblings within relative parent .
You can use .before() to insert before the button and .prev() to clone the div above the button:
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">A1</div>
<div class="a">A2</div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z">Z1</div>
<button type="button">press</button>
</div>
If I understand correctly, you should be able to use .prev() to find the previous div, then append a clone using .after().
$(".wrap button").click(function() {
var prev = $(this).prev("div");
prev.after(prev.clone());
});
div {
margin: 5px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}
.z {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a"></div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
if i correctly understood problem
$('button').on('click', function(){
var siblings = $(this).siblings();
siblings.last().clone().insertAfter(siblings.last() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">a1</div>
<div class="a">a2</div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z">z1</div>
<button type="button">press</button>
</div>
I'm trying to write JQuery for a set of animated info boxes. Clicking on the title div.info-box__title should open the adjacent div.info-box__content and at the same time close any other open div.info-box__content
Update - should have specified, I also need ALL boxes to close when user clicks outside any .info-box.
Update 2 - Fiddle here: https://jsfiddle.net/q9orfsoy/
The markup is like this:
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
I always struggle with execution order issues with JS. What I have so far are two functions:
Opening:
$('.info-box__title').bind("click touchstart", function() {
// close the others and open this one
if($(this).next('.info-box__content').css('display') == 'none') {
$(this).next('.info-box__content').slideDown();
$(this).parents('.info-box').addClass('open');
$(this).parents('.info-box.open').siblings().children('.info-box__title').hide();
}
});
Closing:
// hide all when click anywhere else in the document
$(document).bind("click touchstart", function(event) {
// exclude the one that's currently open
if(!$(event.target).closest('.info-box.open').length){
$('.info-box__content').slideUp(function(){
$(this).parents('.info-box').removeClass('open');
});
}
});
What this code does is closes all the info-box__content divs when you click outside them. But if you click on another info-box__title it just opens that as well without closing the rest.
(Initially I thought adding a class of .open to the one that's opened would be enough, but I guess I've run into execution order issues?)
What's the best/recommended way to deal with something like this?
Try utilizing .index() , jsfiddle https://jsfiddle.net/q9orfsoy/1/
var titles = $(".info-box__title");
var content = $(".info-box__content");
titles.on("click touchstart", function(e) {
if ($(this).next(".info-box__content")
.is(":visible")) {
$(this).next(".info-box__content")
.slideUp()
} else {
content.slideUp()
.eq($(this).index(".info-box__title"))
.slideDown()
}
});
// ALL boxes to close when user clicks outside any `.info-box`
$(document).on("click touchstart", function(e) {
if ($(e.target).is(".info-box, .info-box *")) {
return
}
else {
content.slideUp()
}
})
.info-box__content {
display: none;
}
.info-box {
border: 1px solid black;
padding; 20px;
margin:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section id="info-box-1" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 1</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-2" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 2</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 3</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
Close all then open the one you want with the this object.
$('.info-box__title').click(function() {
$('.info-box__content').hide(); //or perform closing action
$(this).siblings('.info-box__content').show(); //or perform opening action
});
To close when clicking outside of any info box,
$('body').not('.info-box').click(function() {
$('.info-box__content').hide(); //or perform closing action
});
Here is a solution.
$('.info-box__title').click(function() {
var sibling = $(this).siblings('.info-box__content');
if(!sibling.is(':visible')){
$('.info-box__content:visible').slideUp();
sibling.slideDown(); }
else sibling.slideUp();
});
$(document).bind("click touchstart", function(e)
{
var open_content = $(".info-box__content:visible");
if (!open_content.parent().is(e.target)
&& open_content.parent().has(e.target).length === 0)
{
open_content.slideUp();
}
});
.info-box__title{background:grey;}
.info-box__content{
height:100px;
display:none;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-4" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-5" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
You could do:
$(document).bind("click touchstart", function(event) {
var $openBox = $(event.target).closest('.open');
$('.info-box__content').not($openBox).slideUp(function(){
$(this).parents('.info-box').removeClass('open');
});
});
This will select all boxes other than the one related to the click event.
Bonus explanation
The reason your current solution doesn't work is that your just checking to see if the open box exists, since it does, it then closes all elements with the class `.info-box__content'. Hope that makes sense!
Easily slideUp all class while using stop() to slideDown() or slideToggle() target section:
$('.info-box__title').click(function() {
$('.info-box__content').stop().slideUp();
$(this).find('.info-box__content').stop().slideDown();
});
$('body').not('.info-box').click(function() {
$('.info-box__content').stop().slideUp();
});
I have the following script:
$(document).ready(function() {
$('.expandButton').click(function() {
$('.expandableSection').toggle("slide");
});
});
I want to apply it to multiple sections. The issue is that every time I click on the .expandButton button, all sections slide instead of making that specific section to slide. This makes sense, but what I need is to have only that section sliding.
My sections look like this:
<h1 class="expandButton"></h1>
<div class="expandableSection">
</div>
<h1 class="expandButton"></h1>
<div class="expandableSection">
</div>
<h1 class="expandButton"></h1>
<div class="expandableSection">
</div>
Use a context based lookup for the expandableSection element. In your case the target expandableSection is the parent of the clicked expandButton element so you can use this(which refer to the clicked button) and then find the target expandableSection using .closest() or .parent()(since expandableSection is the direct parent of the button)
$(document).ready(function() {
$('.expandButton').click(function() {
$(this).next('.expandableSection').toggle("slide");
});
});
.expandButton {
height: 20px;
background: lightgrey;
}
.expandableSection {
height: 20px;
background: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="expandButton"></h1>
<div class="expandableSection">
</div>
<h1 class="expandButton"></h1>
<div class="expandableSection">
</div>
<h1 class="expandButton"></h1>
<div class="expandableSection">
</div>
you can try this:
$('.expandButton').click(function() {
$(this).parent().toggle("slide");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandableSection">
<h1 class="expandButton">sdfsdf</h1>
</div>
<div class="expandableSection">
<h1 class="expandButton">dsfsdfs</h1>
</div>
<div class="expandableSection">
<h1 class="expandButton"> sfasdas</h1>
</div>
<div class="expandableSection">
<h1 class="expandButton">sdfsdf</h1>
</div>