So I have this HTML
<div id="one">One</div>
<div id="two">Two <br/> <br/>
Two
</div>
<div id="three">Three</div>
<div id="four">Four <br/> <br/>
Four <br/> <br/>
Four
</div>
jQuery:
$(document).ready(function () {
$("#two").hide();
$("#four").hide();
$("#one").click(function () {
$("#four").slideUp("slow", function () {
});
$("#three").slideToggle("slow,", function () {
});
$("#two").slideToggle("slow", function () {
});
});
$("#three").click(function () {
$("#four").slideToggle("slow,", function () {});
});
});
What I'm trying to do is show div one and three one under another.
When I click div one, I want div two to show (animate), and div three (and div four, if div three is clicked too) to move position under div two (with same animation).
When I click div one again, I want div two to hide (animate) and div three (and div four, if div three clicked) to go back to the position they had before.
Here's JSFiddle: http://jsfiddle.net/6ynnR/
It seems like you want something like this: EXAMPLE HERE
Updated jQuery:
$("#two, #four").hide();
$("#one").click(function () {
$("#two").slideToggle(function () {
$("#four").slideUp();
});
});
$("#three").click(function () {
$("#four").slideToggle(function () {
$("#two").slideUp()
});
});
Alternatively, here is another approach: EXAMPLE HERE
Just remove the following code and you're good to go :D
$("#four").slideUp("slow", function () {
});
$("#three").slideToggle("slow,", function () {
});
I hope this will work for you,
I added conditional statement:
if(($("#two").is(":visible"))&&($("#four").is(":visible"))){
$("#four").slideToggle("slow,", function () {});
$("#two").slideToggle("slow,", function () {});
}
and removed two functions :
$("#four").slideUp("slow", function () {
});
$("#three").slideToggle("slow,", function () {
});
http://jsfiddle.net/uY73z/19/
Related
I am making a FAQ that ask you 3 question to give you the correct answer. It works in the same way as this website: Nokia Lumia FAQ.
The code works. You have 3 level of content to see depending on the button you press. When a button is pressed on level 1, level 2 and level 3 it will change color so you end with three button that have changed color, its easier to understand in that way you wanted help for Example: Phone - Andriod - Simcard help.
Notice that level 1 and level 2 content have much simliar in the JS code, but level 3 is a bit different because there your browser scroll you down when the content is displayed. And also level 3 does have hyperlink instead of button.
I have to manually dublicate part of this JS code for adding new buttons, and i think there can be an easier way. I really appreciate any help.
Here is the JS:
$(document).ready(function(){
// Level 1
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-1').not(el).fadeOut("slow");
}
$('.showmore-1').hide();
$('.click-1').click(function(){
$('.click-1').removeClass('clickcolor')
$(this).addClass('clickcolor');
});
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
$('#click-1c').click(function () {
show('#showmore-1c');
});
// Level 2
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-2').not(el).fadeOut("slow");
}
$('.showmore-2').hide();
$('.click-2').click(function(){
$('.click-2').removeClass('clickcolor')
$(this).addClass('clickcolor');
});
$('#click-2a').click(function () {
show('#showmore-2a');
});
$('#click-2b').click(function () {
show('#showmore-2b');
});
$('#click-2c').click(function () {
show('#showmore-2c');
});
// Level 3
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-3').not(el).fadeOut("slow");
}
$('.showmore-3').hide();
$('.click-3').click(function(){
$('.click-3').removeClass('clickcolortext') //Level 3 display text instead of button to be pressed and therefore another class of color.
$(this).addClass('clickcolortext');
});
$('#click-3a').click(function () {
show('#showmore-3a');
$('html, body').scrollTop($('#showmore-3a').offset().top);
return false;
});
$('#click-3b').click(function () {
show('#showmore-3b');
$('html, body').scrollTop($('#showmore-3b').offset().top);
return false;
});
$('#click-3c').click(function () {
show('#showmore-3c');
$('html, body').scrollTop($('#showmore-3c').offset().top);
return false;
});
});
enter code here
Here is a part of the HTML
<button class="click-1" id="click-1a">Mobile</button>
<button class="click-1" id="click-1b">PC</button>
<button class="click-1" id="click-1c">Tablet</button>
<div id="showmore-1a" class="showmore-1">View content for mobile help</div>
<div id="showmore-1b" class="showmore-1">View content for pc help</div>
<div id="showmore-1c" class="showmore-1">View content for tablet help</div>
enter code here
Here is the CSS
.clickcolor {
background-color: #4d4d4d !important;
}
.clickcolortext {
color: #4d4d4d !important;
}
Add a target attribute on buttons:
<button class="click-1" id="click-1a" data-target="#showmore-1a">Mobile</button>
<button class="click-1" id="click-1b" data-target="#showmore-1b">PC</button>
<button class="click-1" id="click-1c" data-target="#showmore-1c">Tablet</button>
JS
$('button.click-1').click(function(){
$('.click-1').removeClass('clickcolor')
$(this).addClass('clickcolor');
show($(this).data('target'));
});
To shorten this bit of code:
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
$('#click-1c').click(function () {
show('#showmore-1c');
});
Well, I could tell this:
$('[id^="click-"]').click(function () {
show('#showmore-' + this.id.replace("click-", ""));
});
Im a bit new to jquery so this may be a common probably but I am unable to find what I need on the web.
The issue:
I have a div(inner1) inside a div(outer), the inner1 div is hidden until a button is clicked, when clicked the inner1 div is shown and fades out the background. Within inner1 I have another div(inner2) with similar functionality. When inner1 shows a button is displayed to show inner2. The above works fine. My issue is that if I click the button to show inner1, then exit(hide) the shown div(inner1) then push the button to show it again it now shows both of the inner divs(inner1, inner2). Does this make sense? I have no idea why this is happening.
The Code:
Html:
<div class="documentlist">
<div class="modalBackground"></div>
<div class="modalContent"> x
Text1
<input type="button" id="btnsm1" value="t1" />
<div class="documentdetails">
<div class="modalBackground"></div>
<div class="modalContent"> x Text2</div>
</div>
</div>
</div>
<input type="button" id="btnsm" value="t" />
Jquery:
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
});
A Fiddle of the above.
Does anyone have any ideas?
You need to explicitly say removeClass since .toggle() adds 'show' if not there and removes 'show' if present, cant rely on that in close where you always want to remove the show class from both the elements
Here is what you want to do
$('.close-modal,.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
Edit 2: I didn't check you had to use back as close trigger updated fiddle $('.close-modal,.modalBackground')
Updated fiddle
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
});
Check this
I guess this code does not work, because at DOM load jQuery caches its objects and bind the functions to them?
$('span.button.slide_out').on('click', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideDown();
});
$('span.button.slide_in').on('click', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideUp();
});
I know I could write this easily with slideToggle or something else, but I have to fire different actions on every first and every second click. How can I achieve this using the same selector (instead of creating two different selectors)?
JS FIDDLE
The binding is indeed done on DOM creation, but that doesn't have to be a problem in this case, it also means that the button is still clicked if it no longer has the slide_out class. Therefore you can reuse the same click event and check the current state to choose whether to slide up or down. For example:
$('.slide_out').on('click', function () {
if($(this).toggleClass('slide_out slide_in').hasClass('slide_in'))
$('#testbox').slideDown();
else
$('#testbox').slideUp();
});
Fiddle
You could use the solution from Event binding on dynamically created elements?, as suggested by https://stackoverflow.com/users/502381/juhana:
HTML:
<span class="button_container"><span class="button slide_out">Click me</span></span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>
JS:
$('.button_container').on('click', '.slide_out', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideDown();
});
$('.button_container').on('click', '.slide_in', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideUp();
});
http://jsfiddle.net/ag3cpcfb/
But, in my opinion it would be better to make your code simpler by using slideToggle() and adjust your css classes:
HTML:
<span class="button">Click me</span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>
JS:
$('.button').on('click', function () {
var $testbox = $('#testbox');
if ($testbox.is(':visible')) {
console.log('Click 1');
} else {
console.log('Click 2');
}
$(this).toggleClass('slide_in');
$testbox.slideToggle();
});
http://jsfiddle.net/k77ferjh/
But this fires "Click 1" all of the time if you repeatedly click on the button. If this is not an issue, fine, if it is, you can also use a number to keep track of your clicks:
JS:
var clicks = 0;
$('.button').on('click', function () {
clicks++;
if (clicks % 2 == 0) {
console.log('Slide out');
} else {
console.log('Slide in');
}
$(this).toggleClass('slide_in');
$('#testbox').slideToggle();
});
http://jsfiddle.net/k77ferjh/1/
I have the following HTML code, generated by C#:
<div class="more-news-items" id="#id">
<p>Content goes here</p>
<div style="text-align:center">
<button class="newsfeed-hide">TOON MINDER</button>
<button class="newsfeed-more">TOON MEER</button>
</div>
</div>
I want to hide the
<p>Content goes here</p>
using the following Javascript code, but I want to keep the buttons still in the div. How would I achieve this, and if it is not possible, how can I do this?
$(document).ready(function () {
div.find('.newsfeed-hide').click(function () {
$('.more-news-items').html('');
});
});
Try
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items').children('p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
try:
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
This will hide a p's that are siblings of the parent that the button is in.
But other posts are right in as much as if you want to hide all p's in div's with the class .more-news-items you can select this using $('.more-news-items p') instead. Depending on the exact situation you are using this code in (i.e. if you will have more than one area and only want all p's in all areas removed, or only the ones local to the button.
EDIT:
Remove the $('.more-news-items').html(''); also, this will remove all html inside the .more-news-items div, which you do not want to do here.
Here is the live example: http://jsfiddle.net/lee_gladding/dujc66qd/
I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?
Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO
here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});