I have the following code to show and hide a div but if I want to click on the image I can add the class but if I want to remove it by clicking the image then it will open it again. Can anyone explain to me how this works?
https://jsfiddle.net/bmhv3edw/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
You can see that when you clicked on the img, the e.target is <img>, as it don't have class .active, it'll always trigger the false part.
Solution, change
if($(e.target).is('.active')) {
to
if($(this).is('.active')) {
See jsFiddle
You can greatly simplify your logic by using slideToggle() on the current .answer-section-content, and slideUp() on all the rest:
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
This allows you to remove the ids from the answers and the hrefs from the divs.
$(document).ready(function() {
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
});
body{ background: black };
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
color: #ffffff;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png">Question 1</div>
<div class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png" />Question 2</div>
<div class="answer-section-content">
<p>Answer 2</p>
</div>
</div>
</div>
Related
When I select an option from the dropdown, a set of buttons associated with that selection appears in a div (where it should). I then click one of those buttons which causes a second div to appear (#info, green background) and content associated with the button to appear inside of the div (as intended).
My issue is this:
Once the second div has appeared, if I go back to the initial dropdown and select a different option, I want the green #info div to disappear, where it currently stays visible and contains the content associated with the last button clicked despite having selected a different dropdown option.
I would SO appreciate any help anyone can provide! Thanks so much for taking a look. So grateful to have access to all of your smart brainz.
Here is my Fiddle
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "red") {
$(".box").not(".red").hide();
$(".red").show();
} else if ($(this).attr("value") == "green") {
$(".box").not(".green").hide();
$(".green").show();
} else if ($(this).attr("value") == "blue") {
$(".box").not(".blue").hide();
$(".blue").show();
} else {
$(".box").hide();
}
});
}).change();
$('.buttons button').click(function() {
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
});
.box {
padding: 20px;
margin-top: 20px;
border: 1px solid #000;
width: 200px;
height: 250px;
padding: 0px;
display: inline-block;
float: left;
}
#button-column {
text-align: center;
padding: 0px;
}
button {
font-size: 12px;
width: 100px;
height: 30px;
padding: 10px;
margin: 15px;
}
#info {
width: 250px;
height: 200px;
float: left;
display: inline-block;
text-align: center;
margin-left: 15px;
margin-top: 30px;
}
#dropdown {
width: 200px;
text-align: center;
}
.box h3 {
text-align: center;
}
.info {
background-color: green;
height: 200px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown">
<h3>I am a...</h3>
<select>
<option>Select</option>
<option value="green">Dinosaur</option>
<option value="red">Unicorn</option>
</select>
</div>
<div class="green box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="content">Content</button>
</li>
<li class="buttons">
<button data-link="mad">Mad</button>
</li>
<li class="buttons">
<button data-link="hungry">Hungry</button>
</li>
</ul>
</div>
<div class="red box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="shy">Shy</button>
</li>
<li class="buttons">
<button data-link="curious">Curious</button>
</li>
<li class="buttons">
<button data-link="sleepy">Sleepy</button>
</li>
</ul>
</div>
<div id="info">
</div>
<div id="hiddenDivs" style="display:none;">
<!-- Dinosaur Select -->
<div id="content">
<div class="info">
<h3>Laying in the sun is nice.</h3>
</div>
</div>
<div id="mad">
<div class="info">
<h3>Go knock some trees over!</h3>
</div>
</div>
<div id="hungry">
<div class="info">
<h3>Go make a salad!</h3>
</div>
</div>
<!-- Unicorn Select -->
<div id="shy">
<div class="info">
<h3>I like to hide in the forest.</h3>
</div>
</div>
<div id="curious">
<div class="info">
<h3>Wait until everyone is asleep.</h3>
</div>
</div>
<div id="sleepy">
<div class="info">
<h3>Napping under a shady tree is the best.</h3>
</div>
</div>
Here's an updated Fiddle.
You just need to hide and show the #info div on change or load.
So anytime the dropdown changes, that #info div will hide. And then, if someone clicks a button, it will show. That show() function will always run, but will be ignored if you're clicking on the button multiple times.
});
$("#info").hide(); // Hide
}).change();
$('.buttons button').click(function (){
$("#info").show(); // Show
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
Help Needed
I have some sets of divisions available, where all of the div's are with the same classes. Each div contains a button and some other div's.
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
and the css used
.box {
width:100px;
height:100px;
display:block;
margin:5px;
float:left;
}
.box-small {
width:20px;
height:20px;
display:block;
margin:5px;
float:left;
}
.sb {
width:10px;
height:10px;
display:block;
margin:5px;
float:left;
}
.red {background-color:red;}
.yellow {background-color:yellow;}
.border{border:1px solid #000;}
Now, when i click on the button inside the div, the div with 'box-small' class has to be changed. It works with the following jQuery.
$('.changecolo').click(function () {
var $this = $(this);
$this.closest(function(){
$('.box-small').removeClass('yellow');
$('.box-small').addClass('red');
});
});
but the problem is when i click on the button, styles for all the divs are changing. I want to change the current divs class only.
You can find the Fiddle for the same here http://jsfiddle.net/om749rbd/6/
Your valuable help will be appreciated. Thanks
Your use of closest() is incorrect, try giving it a selector instead of a function. From there you can use $this.find() to get the .box-small elements. You can also use toggleClass() to change between the classes on each successive click. Try this:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest('.box').find('.box-small').toggleClass('yellow red');
});
Updated fiddle
In your click event handler add the following code.
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
This will find the closest parent having class box and then find the descendant having class box-small and then change the class of this element.
Demo
$('.changecolo').click(function() {
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});
.box {
width: 100px;
height: 100px;
display: block;
margin: 5px;
float: left;
}
.box-small {
width: 20px;
height: 20px;
display: block;
margin: 5px;
float: left;
}
.sb {
width: 10px;
height: 10px;
display: block;
margin: 5px;
float: left;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.border {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
Use .siblings() in jquery .closest() is not work in your context.
$('.changecolo').click(function () {
var $this = $(this);
$this.siblings('.box-small').removeClass('yellow').addClass('red');
});
or
$('.changecolo').click(function () {
var $this = $(this);
$this.siblings('.box-small').toggleClass('yellow red');
});
Fiddle
Use can use $this selector(if HTML structure doesnt change) to get the next sibling like this:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest(function(){
$this.next().next().removeClass('yellow');
$this.next().next().addClass('red');
});
});
Update fiddle:
http://jsfiddle.net/om749rbd/11/
Try using $(this).closest() to get the parent div and then target the specific div using find()
Check the CODE
$('.changecolo').click(function () {
var $this = $(this);
var boxSmall = $this.closest('div').find('.box-small');
boxSmall.removeClass('yellow').addClass('red');
});
$('.changecolo').click(function () {
var that = $(this).siblings('.box-small');
$(that).removeClass('yellow');
$(that).addClass('red');
});
updates demo
try this
Script
$('.changecolo').click(function () {
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});
i'd like to know what i should do to show only one div out of multiple divs with the same classname. If one is open and i click another, the one that is open should close, and the one that i clicked on should open.
HTML:
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
CSS:
.out {
width:150px;
height: 25px;
background-color: green;
float: left;
margin-right:10px;
}
.open {
border-bottom:5px solid peru;
height: 150px;
}
.out.open .content {
width:100%;
height:100%;
}
a {
display: none;
}
.open .content {
display: block;
}
.open .content > a {
color: white;
text-decoration: underline;
display: block;
}
JS:
$(document).ready(function () {
$('.out').click(function () {
$('.out').find('open').removeClass('open');
$(this).addClass('open');
});
});
I know the problem is in the jquery, but i have no clue of what i'm doing wrong.
Here's a fiddle too: http://jsfiddle.net/4hpgb/22/
Just change this line:
$('.out').find('open').removeClass('open');
to this:
$('.out').removeClass('open');
It should work.
What is happening is that you're removing all classes open from all div.out, then adding class open to the current one.
JSFIDDLE DEMO
$('.out').click(function () {
$('.out').removeClass('open');
$(this).toggleClass('open');
});
Write:
$('.out').click(function () {
if(!($(this).hasClass('open'))){
$('.out.open').removeClass('open');
}
$(this).addClass('open');
});
Updated fiddle here.
Close all the open divs first
$(document).ready(function () {
$('.out').click(function () {
$('.out').find('open').removeClass('open');
$('.open').each(function(i,v){
$(this).removeClass('open');
});
$(this).addClass('open');
});
});
Demo here
I have a click function that makes a div slide down.....when i click on the next li i want the previous div to slide back up and the new div to slide down but only when its on a different row....when its on the same row I'm going to put content in the div that i want to fadeIn
heres the fiddle im working with
http://jsfiddle.net/abtPH/3/
heres my jQuery
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
heres my html
<ul style="list-style: none;">
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
</ul>
I presume you're looking for something like this?
$('ul').on('click', 'li:not(li.active + li)', function (e) {
function toggle(el) {
el.toggleClass('active', 400);
el.find('.outer').slideToggle();
}
var me = $(this)
if(me.parent().has(':animated').length == 0) {
toggle(me.siblings('.active').andSelf());
}
});
Demo: http://jsfiddle.net/B6TZS/