I have anchor which when you click would slidedown a form within a div, and then click again would slide it back up. Initially I just used .toggle, but now I have multiple anchors and multiple divs with the same class, so I had to rework the code or else anytime you clicked on any of the anchors all the divs would slidedown and you would see 4 forms.
So, I thought I could just rewrite the code with .closest, but it doesn't seem to be working. I think it's because .closest has to go up the DOM hierarchy, so it won't work for my div the way it's laid out. I tried .sibling but that doesn't work either. Any ideas?
Pre-Pay with Credit Card
<div style="display: none;" class="payment-form-wrapper">
<h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
<form action="" method="POST" id="stripe-payment-form" class="payment-form">
...
</form>
</div>
<script>
$("a.payment-form-show").click(function() {
var e = $(this).closest("div.payment-form-wrapper");
if (e.is(":hidden")) {
e.slideDown("slow");
$(this).html("Don't Pre-Pay with Credit Card")
} else {
e.slideUp("slow");
$(this).html("Pre-Pay with Credit Card")
}
return false;
});
</script>
I think you should wrap your a.payment-form-show and div.payment-form-wrapper inside a div. Like this:
<div>
Pre-Pay with Credit Card
<div style="display: none;" class="payment-form-wrapper">
<h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
<form action="" method="POST" id="stripe-payment-form" class="payment-form">
...
</form>
</div>
</div>
When the a tag is clicked, you look for the immediate parent and then find the form:
$(this).parent().find("div.payment-form-wrapper");
In this case, the div wrapper serves as the context for your tags. This would create a more maintainable code. Because when you use .next() or some function to look for the .div.payment-form-wrapper, your javascript code is coupled to the current position of the tags. In the future, if you modify the position, or add some tags in between, your code would fail.
Use this...
$(".payment-form-show").on('click', function() {
$('.payment-form-wrapper').slideToggle('slow');
if($('.payment-form-wrapper').is('visible')){
$(this).html("Pre-Pay with Credit Card");
}else{
$(this).html("Don't Pre-Pay with Credit Card");
}
});
An see the DEMO
This code should work even if all the div's have the same class. Check it out:
$(".payment-form-show").on('click', function() {
var slider = $(this).closest("a").next();
slider.slideToggle("slow");
slider.is(":visible") ? $(this).html("Pre-Pay with Credit Card") : $(this).html("Don't Pre-Pay with Credit Card");
});
Fiddle based off of MG_Bautista's fiddle: http://jsfiddle.net/8b5q5/1/
Related
I want to use JQuery on my Coldfusion application for showing/hiding div elements with checkbox checked/unchecked within the div.
Basically, in a view I show multiple divs elements, every div have also more divs inside, one of these internal divs contains an input type checkbox that could come checked or unchecked.
I also have three buttons in that view 'Active, Inactive, All'. When clicking on Active I want to show all div elements with checkbox checked, not showing the unchecked, and the other way around when clicking on Inactive.
<div class="btn-group ">
<button id="actives" type="button">Actives</button>
<button id="inactives" type="button">Inactives</button>
<button id="all" type="button">All</button>
</div>
<div id="apiDiv">
<cfloop array="#apis#" index="api">
<div class="card card-found">
<div class="card-header">
<cfif Len(api.iconClass)>
<i class="fa fa-fw #api.iconClass#"></i>
</cfif>
#structKeyExists( api, "name" ) ? api.name : api.id#
</div>
<div class="card-body">
<p>#api.description#</p>
</div>
<div class="card-button">
<input class="#inputClass# ace ace-switch ace-switch-3" name="#inputName#" id="#inputId#-#api.id#" type="checkbox" value="#HtmlEditFormat( api.id )#"<cfif ListFindNoCase( value, api.id )> checked="checked"</cfif> tabindex="#getNextTabIndex()#">
<span class="lbl"></span>
</div>
</div>
</cfloop>
</div>
I´m not an expert at all with JQuery. The only thing I have done is what follows and I do not know whether if is a good beggining or not:
$("#actives").click(function (e) {
$("#apiDiv .card").filter(function() {
<!--- code here --->
});
});
Someone please that can help me with it? Thanks a lot in advance!
After your CF code executes, it will generate a .card for each loop iteration of your apis array. So you jQuery code will need a click handler for the #actives button and that will loop through each() iteration of the checkboxes to determine the checked/unchecked state. At that point find the closest() ancestor .card and show()/hide() the .card depending upon the checkbox state.
$("#actives").click(function (e) {
$('input[type=checkbox]').each(function() {
if (this.checked) {
$(this).closest(".card").show();
} else {
$(this).closest(".card").hide();
}
});
});
If you want to do it with jQuery code:
$('#actives').click(function(){
$('#apiDiv').show();
});
Working Fiddle
The code you are probably looking for is in these event handlers for your buttons:
function activesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").show();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").hide();
}
function inactivesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").hide();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").show();
}
function allHandler() {
jQuery(".card.card-found").show();
}
jQuery("#actives").click(activesHandler);
jQuery("#inactives").click(inactivesHandler);
jQuery("#all").click(allHandler);
I reproduced some of your ColdFusion by replacing it with JavaScript and provided a demonstration of the above event handlers in this JSFiddle.
Call the checkbox by its id and when it's checked, write a function to display the divs you want to display:
<input type="checkbox" id="check">
$document.getElementById("check").onclick = function(){
$document.getElementById("div_name").style.display="block"; // block displays the div.
}
I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});
I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()
Today I tried to make the simpliest close button in javaScript. It unfortunately does not work. This is how it look like:
<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>
and the js code is:
<script type=”text/javascript”>
$("#popup_close").click(function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
</script>
I'd also like to make it apply to any of those "popups", so I'd probably change my it to something like $(this).parent().parent().fadeOut(); - is it possible to do so?
Thanks for help guys! :)
#EDIT
As none of Your solutions work I'll place my code literally :D Maybe You'll find some mistakes that makes it faulty:
<?php if(isset(errors['user'])) : ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message"><?php echo errors['user']; ?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
<?php endif; ?>
I hope that will help You spot any errors. It displays correctly, I click on my "OK" span, nothing happens :p I hate js :D
I saw your code, the jquery part of the code is working..
Check here: Jsfiddle -> http://jsfiddle.net/Zahinize/7YD4D/13/
You should rewrite your conditional If statement like this,
<? ini_set('error_reporting', E_ALL); ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message">
<?php
if(isset(errors['user'])){
echo errors['user'];
}
?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
set error_reporting at that the top..
See more here: http://php.net/manual/en/function.error-reporting.php
Maybe this would help, but frankly i haven't seen error handling like this: error['user'] anywhere.. you should see error handling for writing better code ;)
IDs must unique, you should use classes instead:
<div class="popup_bg">
<div class="popup_window">
<span class="popup_close"></span>
</div>
</div>
Then for selecting the target parent of the clicked element you can use closest method:
$(function() {
$(".popup_close").click(function(event) {
$(this).closest(".popup_bg").fadeOut();
// event.stopPropagation();
});
});
Note that in your code event is undefined you should pass the event object to your handler.
Add document.ready and/or use .on function
<script type=”text/javascript”>
$(function(){
$("#popup_close").on('click', function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
});
</script>
Also, ID's may not repeat in your document, use other selector like class
If there are more than one popup better to use class instead of id.
Example.
$(function()
{
$(".popup_close").on('click',(function()
{
$(this).parents("div.popup_bg").fadeOut();
});
});
And html
<div class = "popup_bg">
<div class = "popup_window">
<span class = "popup_close"></span>
</div>
</div>
You need some content in your span or set height and with. Then you will be able to click on it and it will work.
Avoid tricks with parent().parent() this may break if you change your div structure.
As others have said use the jquery document ready (read a tutorial) and use classes not ids if you intend to reuse the code (read a CSS tutorial)...
I have h3 block's and on click of each of the block I am showing the section associated with it. It is actually something like accordion(hide and collapse). I have also given a drop icon to the h3 tags, means that when the block is opened the h3 should have a dropicon pointing downwards while others h3 should have there dropocons towards right. I am controlling this behaviour using backgroundPosition. I am using the jQuery visible condition to see if the particular block is visible then give its drop icon one background position and to the rest other. It works fine but only for first click. It doesn't work for second click; can somebody explain why? Here is my code:
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
UPDATED CODE:
$("h3").click(function() {
$(".tabs").hide();
$(this).next().show();
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
} else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
})
If you wrap the whole block in a div it might make traversing easier.
Html:
<div class="drop-block">
<h3>Click this</h3>
<ul>
<li>Drop</li>
<li>it</li>
<li>like</li>
<li>it's</li>
<li>hot</li>
</ul>
</div>
Jquery:
var dropper = $('.drop-block');
$(dropper).find('h3').click(function(){
$(this).toggleClass('active');
$(dropper).find('ul').toggle();
});
Example
I Belive that you are looking for live
So it will be something like this:
$(element).live('click', function(){
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
}
Instead of editing the css of them, make a css class "open" (or similar), and then add / remove the class on the click to open / close.
It is much easier to debug by checking for the existence of a class than it is to check the css properties of something in JS.
Better make a class name for each situation and easly handle the action
$('h3').on('click', function(){
if($(this).hasClass('opened')) {
$(this).removeClass('opened');
}
else {
$(this).addClass('opened');
}
}
$(document).on('click', 'h3', function(e) {
$(".tabs").hide('slow');
$(this).css({'backgroundPosition':'0px 14px'});
if(!$(this).next().is(':visible'))
{
$("h3").css({'backgroundPosition':'0px -11px'});
$(this).next().show('slow');
}
});
You can remove 'slow' from show/hide if animation is not required
Here is an example.
It sounds like you need to bind click events to the h3 elements and toggle the visibility of the child elements:
$(function(){
$("h3").click(function(){
$(this).next(".tabs").toggle();
});
});
Example markup:
<h3>Item 1</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
Here's a jsFiddle to demonstrate.