When i click to show a toggle, it executes 2 times and again closing the toggle thereby hiding my contents.Could someone please help on this.
Here is the code:
html:
<div class="accordianbx">
<div class="acc_icon">
<div class="whyimgbx"> <span><img src="images/2.png" alt=""></span></div>
<h3>abcd <span>&xyzs </span></h3>
</div>
<div class="hospital acc_descrpbx">
<div class="innrleft_hospitalbx">
<h2>desc </h2>
<p>description</p>
Know More
</div>
</div>
</div>
jquery:
$('.acc_icon').unbind('click').click(function(){
// alert('came into toggle function');
$(this).parents('.accordianbx').find('.acc_descrpbx').slideToggle();
$(this).parents('.accordianbx').siblings().find('.acc_descrpbx').slideUp();
// alert('going out of toggle function');
});
Related
I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!
Hi i have this problem: I want to click on div which will flipped (this is work) but next step is flipp div back on click on "x" (this is my problem).
HTML code:
<div class="col-md-4">
<div class="balik">
<div class="panel panel-default panel-cube">
<div class=" flip">
<div class="card">
<div class="panel-body face front">
<h4>Balík 28 dní</h4>
<br>
<h1>16,80€</h1>
<br>
<h4>Zisti viac o balíku »</h4>
</div>
<div class="panel-body face back">
<p class="close">x</p> <h4>O Balíku 28 dní</h4>
» celkom 28 dní na topovanie
<br />» 5 topovaných inzerátov
<br />» -30% z ceny oproti balíku 7 dní
<br />
<br>
<button class="btn btn-success"><i class="fa fa-shopping-cart"></i> Kúpiť</button>
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY code:
$(function(){
$('.flip').click(function(){
$(this).find('.card').addClass('flipped')
});// this is work
$('.close').click(function(){
$('.flip').find('.card.flipped').removeClass('flipped')
}); // this is not work
});
Thanks for answers.
Because .flipped is essentially a dynamically-created element, you'd need to use event delegation:
http://jsfiddle.net/isherwood/7Zg92/
$(document).on('click', '.close', function () {
$('.flip').find('.card.flipped').removeClass('flipped')
});
That's because events bubble up, you should stop the propagation of the event:
$('.close').click(function(event) {
event.stopPropagation();
$('.flip').find('.card.flipped').removeClass('flipped');
});
http://jsfiddle.net/aaLUs/
The following code display columns that slide down (the .select-plan-details div) when pressing .select-plan-buy (the other columns, if open, slide up).
HTML:
<div class="select-plan-container">
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-starter">
</div>
<div class="select-plan-details select-plan-details-starter">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-level">
</div>
<div class="select-plan-details select-plan-details-level">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-levels">
</div>
<div class="select-plan-details select-plan-details-levels">
</div>
</div>
</div>
JS:
jQuery(".select-plan-buy").click(function () {
jQuery('.select-plan-column .select-plan-details').slideUp();
jQuery(this).next(".select-plan-details").slideToggle();
});
Right now when I press .select-plan-buy again (when .select-plan-details is already open), it slides up and then down again (the current column). How can I do it so it slides up properly?
You could use:
jQuery('.select-plan-column .select-plan-details').not(jQuery(this).next(".select-plan-details")).slideUp();
jQuery(".select-plan-buy").click(function () {
var objDetail=$(this).next(".select-plan-details");
$('.select-plan-column .select-plan-details').not(objDetail).slideUp();
objDetail.slideDown();
});
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.