I'm trying to make 1 form in multiple screens whit 1 submit button.
This is what i got this far but i'm stuck in jquery and hoped that someone could help me an say what i'm doing wrong here.
<html>
<body>
<form action="" method="post">
<ul id="stappen">
<li id="step_1" class="selected">1. step_1</li>
<li id="step_2" class="">2. step_2</li>
<li id="step_3" class="">3. step_3</li>
<li id="step_4" class="">4. step_4</li>
</ul>
<div id="stappen">
<div id="content_step_1" class="content_step" style="display: block;">content step 1</div>
<div id="content_stap_2" class="content_step" style="display: none;">content step 2</div>
<div id="content_stap_3" class="content_step" style="display: none;">content step 3</div>
<div id="content_stap_4" class="content_step" style="display: none;">content step 4</div>
</div>
</form>
</body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
(function() {
var body = $('body');
$('.step_2').bind('click', function(){
body.toggleClass('step_2');
return false;
});
})();
</script>
</html>
The thing what i wan't to do is:
When li step_2 is clicked li id="step_2" class=""- changes "class" to "selected" and "display" changes "none" to "block" like in this code is at the moment step 1 is selected and display: block.Afther all of this changes everything from step 1 must be the same as everything else :) -->class empty and display to none.
I know there is something wrong whit the jquery code but i don't know how to make it wright.
every try i did converted in an error or din't work, this is why ifilled in the script whish i know is partialy good.
I hope somebody can help me and/or point me in the right direction.
thnx in advanced.
As #Ricardo says, you can not use same ID as for UL as for DIV. You have to fix it. Here example of improved you code version:
HTML
<body>
<form action="" method="post">
<ul id="ul_stappen">
<li id="step_1" class="selected">1. step_1</li>
<li id="step_2" class="">2. step_2</li>
<li id="step_3" class="">3. step_3</li>
<li id="step_4" class="">4. step_4</li>
</ul>
<div id="div_stappen">
<div id="content_step_1" class="content_step" style="display: block;">content step 1</div>
<div id="content_stap_2" class="content_step" style="display: none;">content step 2</div>
<div id="content_stap_3" class="content_step" style="display: none;">content step 3</div>
<div id="content_stap_4" class="content_step" style="display: none;">content step 4</div>
</div>
</form>
</body>
CSS
.selected{color:red}
JAVSCRIPT
(function() {
$('#ul_stappen>li').on('click',function(){
if(!$(this).hasClass('selected')){
$('.selected').removeClass('selected');
$(this).addClass('selected');
$('#div_stappen>div').filter(function(){return $(this).css('display')==='block'}).hide();
$('#div_stappen>div').eq($(this).index()).show();
}
});
})();
And Working JSFIDDLE example
Hope this help you
You should not repeat IDs in HTML. The id "stappen" is repeated for both UL and DIV below that.
Let's assume that UL id is "ul_stappen" and DIV id is "div_stappen":
<ul id="ul_stappen">
...
</ul>
<div id="div_stappen">
..
</div>
Now we can achive your required effect with the jQuery code below:
$( '#ul_stappen' ).on('click', 'li', function() {
if ( $(this).hasClass('selected') ) {
return;
};
// show hide proper content divs
var oldIndex = $ulStappen.find( 'selected' ).index();
var newIndex = $(this).index();
$( '#div_stappen li' ).eq( oldIndex ).hide();
$( '#div_stappen li' ).eq( newIndex ).show();
// add/remove 'selected' for proper li's
// this must be the last part to be done
$( '#ul_stappen' ).find( 'selected' ).removeClass( 'selected' );
$(this).addClass( 'selected' );
});
Good luck, have fun!
First issue: you have two elements with the same id (steppen). It's a mistake. For my code to work you need to change the second element id in "steppendiv".
Second issue: the first content id is step, while the other three are stAp (with the "a" instead "e"). For my code to work you need to change them and make all "content_step_1" (_2 _3 and so on)
$(document).ready(function () {
$( "#stappen" ).on( "click", "li", function() {
$( "#stappen li" ).removeClass( "selected" );
$( this ).addClass( "selected" );
var liId = $( this ).attr( "id" );
var splittedId = liId.split( "_" );
var newId = "#content_step_" + splittedId[ 1 ];
$( "#stappendiv > div" ).hide();
$( newId ).show();
});
});
Related
I'm trying to select the form element which is the distant parent of a button. The button is deeply nested inside of a div. I have two type of forms in two pages so I'm using the same event for both of them. That's why I'm using bother the selectors separated by a comma.
$('.createForm, .editForm').on('click', '.delete-btn', function() {
console.log($(this))
});
.delete-btn{
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/submit" method="POST" class="editForm">
<div class="form-group">
<div class="d-flex ">
....some elements
</div>
</div>
<div class="form-group">
....some elements
</div>
<div class="form-group">
....some elements
</div>
<div class="form-group">
<div>
<div></div>
<div>
<div class="post-container">
<textarea></textarea>
<button type="button" class="delete-btn">Test</button>
</div>
</div>
<div></div>
</div>
</div>
</form>
What I tried so far:
1. console.log( $( this ).parent() );
2. console.log( $( this ).parent( 'form' ) );
3. console.log( $( this ).parents() );
4. console.log( $( this ).parents( 'form' ) );
5. console.log( $( this ).parentsUntil() );
6. console.log( $( this ).parentsUntil( 'form' ) );
7. console.log( $( this ).parent().parent().parent().parent() );
8. console.log( $( this ).closest( 'form' ) );
Please note that the same jQuery code works when I use an input element instead of a button. Although the input element is one level out of a div than the button.
This is the correct working code
$('body form').hasClass('.editForm')
If I understand, you want to find the form tag that envelops the clickable item? If so, use closest()
$('.createForm, .editForm').on('click', '.delete-btn', function() {
let form_tag = $(this).closest('form')
});
I am looking for some help using JS or jQuery to show and hide a div. This I am familiar with but the issue arrises while using this in a Wordpress loop. I have done this before but it was in a bit of a hack-y way and I thought I would try and find the correct way.
This is loop code:
<div class="row">
<div class="col-md-8 ">
<img src="WP IMAGE HERE" alt="">
</div>
<div class="col-md-4 offers">
<h2 class="offers--title">WP TITLE HERE</h2>
<hr class="offers--hr">
<p class="offers--bio">WP OFFER INFO HERE</p>
<button type="button" href="#" onclick="showHide()" class="btn btn-crs-sm ">Redeem this offer</button>
<div id="voucher"> THIS IS THE DIV TO BE SHOWN/HIDDEN</div>
</div>
</div>
My general plan of action was this:
Add an onclick to the button code that is in the loop:
<button type="button" href="#" onclick="showHide()" class="btn btn-crs-sm ">Redeem this offer</button>
show/hide using this code:
function showHide() {
var x = document.getElementById("voucher");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I then used:
$(document).ready(function() {
$("div[id^='vouche']").each(function(i) {
$(this).attr('id', "voucher" + (i + 1));
});
});
to add a number to the end of each ID called "voucher"
I then duplicated the first batch of code shown above three times to be called showHide1, 2 & 3 and refer to the div elements voucher1, 2 & 3.
The next issue is to then alter the code of the onclick in the buttons in the loop (so it says showHide1,2,3() etc.) – I tried to do this in jQuery but this was where I came unstuck and decided to look for help.
There must be a much easier & more efficient way of doing this!
Any help would be greatly appreciated.
EDIT/UPDATE:
I have now edited my jQuery to this:
$(document).ready(function() {
$("div[id^='vouche']").each(function(i) {
$(this).attr('id', "voucher" + (i + 1));
});
});
$(document).ready(function() {
$("button[id^='voucherButto']").each(function(i) {
$(this).attr('id', "voucherButton" + (i + 1));
});
});
$( "#voucherButton1" ).click(function() {
$( "#voucher1" ).toggle( "slow", function() {
});
});
$( "#voucherButton2" ).click(function() {
$( "#voucher2" ).toggle( "slow", function() {
});
});
$( "#voucherButton3" ).click(function() {
$( "#voucher3" ).toggle( "slow", function() {
});
});
This works correct as expected (adding the right numbers to the right Id's, etc) however it doesn't show/and hide correctly. Any ideas?
You can get elements with jQuery by $('#yourId'). jQuery has already a method which allows you to display or hide an element by just calling toggle()
as described in their docs.
Your showHide() function can be replaced by this:
function showHide(yourPostId) {
$('#voucher-' + yourPostId).toggle();
}
You have to extend each loop with an attribute that is related to the current iteration. For example with the post id...:
<?php while (have_posts()): ?>
<div class="row">
<div class="col-md-8 ">
<img src="WP IMAGE HERE" alt="">
</div>
<div class="col-md-4 offers">
<h2 class="offers--title">WP TITLE HERE</h2>
<hr class="offers--hr">
<p class="offers--bio">WP OFFER INFO HERE</p>
<button type="button" href="#" onclick="showHide(<?php the_ID(); ?>)" class="btn btn-crs-sm ">Redeem this offer</button>
<div id="voucher-<?php the_ID(); ?>"> THIS IS THE DIV TO BE SHOWN/HIDDEN</div>
</div>
</div>
<?php endwhile; ?>
I have searched and tried many things to do this such as closest() and parents() and parent() and find() But i couldnt make it to work at all .
I have this html
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'></div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'></div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng"></div>
</div>
</div>
</div>
So what i want is when i click on on div class deletepng i want to remove the two divs unlikepng and likepng .
this js
$(document).on ("click", ".deletepng", function () {
$this = $(this);
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
});
I just wonder why they dont work those my trying . Where it can be my mistake ?
EDIT:
i dont know if this have a role or not , i have what i tried inside Dialog box like that
$(document).on ("click", ".deletepng", function () {
$this = $(this);
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>'); // do something here
$(this).dialog("close");
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
}
}
});
});
use closest then use the second argument as the context.
$(document).on("click", ".deletepng", function() {
var $holder = $(this).closest('.like_holder');
$('.likepng, .unlikepng', $holder).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width='28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'>hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'>like</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'>unlike</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete</div>
</div>
</div>
</div>
EDIT
Since your update, you need to set a global variable to remember $this or the container/holder. try this:-
var $holder;
$(document).on("click", ".deletepng", function() {
$holder = $(this).closest('.like_holder');
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>');
$(this).dialog("close");
$('.likepng, .unlikepng', $holder).remove();
}
}
});
});
$this.closest(".like").html(); => this will return HTML of parent div, where delete button is. Not removing the element
$this.parents(".like_holder").html() => this will return html of div.message_holder. Not removing the element.
$this.closest(".like_holder").html() => this will return html of div.like_holder
$this.parent().parent().html(); close enogh, but still far => html of div.like_holder
$this.closest(".like_holder").find(".like_holder").html(); return null => no child element with class like_holder in div.like_holder.
Kind of example
$(document).on ("click", ".deletepng", function () {
var $parent = $(this).parent().parent();
$parent.find('.likepng').remove();
$parent.find('.unlikepng').remove();
});
.deletepng{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'> like me</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'> unlike me</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete button</div>
</div>
</div>
</div>
UPDATE
If you want to make it from dialog box, or other things - you can't use this variable. This is not making any sense. You should provide unique id to your message_box and then use it, like
$(id_of_message_box).find('.likepng, .unlikepng').remove()
or as I can see from your code:
var $parent = $this.parent().parent();
$parent.find('.likepng, .unlikepng').remove();
It means you should use $this in your function instead of $(this)
You can access the parents parent of your $(this) like:
var likeholder;
likeholder = $(this).parent().parent();
However this is generally ill advised. You'll have a jquery object though.
Let me know how you get on
In order to select the parent of a parent of an element you try this:
$(document).on ("click", ".deletepng", function () {
alert( $($(this).parent()).parent().html());
});
Since you can only execute the parent() method on Jquery Objects.
Here's an example unrelated to your code. JSFiddle.
Try this, you need sibling of parent;
alert( $this.closest(".like").parent().find(".unlikescore").html());
alert ($this.closest('.like').siblings('.unlikepng').html()) ;
working js fiddle
i have some divs i wanna toggle i am able to toggle but unable to remove classes when ever i click on the next div
index.php
<div id="menu_top1" class="menu_top1">LINK 1</div>
<div id="menu_top" class="menu_top">LINK 2</div>
<div id="content_area1" style="display:none;">
THIS IS LINK 1
</div>
<div id="content_area2" style="display:none;">
THIS IS LINK 2
</div>
Jquery.js
$('#menu_top1').click(function() {
$('#content_area1').toggle('slow', function() {
$('.menu_top1').toggleClass('active');
});
});
Here is a Fiddle https://fiddle.jshell.net/kunz/t5u6mcmn/
if you are trying to show corresponding content_area when you click on link and make the link active? you can check this
fiddle
i saw you using same id for multiple elements.just edited them.
still you want same id for all elements(strictly not recommended) check this fiddle
check this updated fiddle
$('.menu_top').click(function() {
var index = $( this ).index() + 1;
console.log(index);
$('[id^="content_area"]' ).hide();
$('#content_area' + index ).toggle('slow', function() {
$('.menu_top').toggleClass('active');
});
});
I have 3 divs that contain a hidden field each:
<div class="item-wrapper">
<div class="item-title">Button 1</div>
<div class="hidden-field>Some hidden data</div>
</div>
<div class="item-wrapper">
<div class="item-title">Button 2</div>
<div class="hidden-field>Some more hidden data</div>
</div>
<div class="item-wrapper">
<div class="item-title">Button 3</div>
<div class="hidden-field>Even more hidden data</div>
</div>
My jQuery looks like this:
$( ".item-title" ).click(function() {
$( this ).next().slideToggle( "slow" );
$( this ).toggleClass( "item-active" );
});
The hidden-field divs have an absolute position and are displayed below the three wrappers. I want to find a way to show only one hidden field at a time, which basically means that if any hidden-field is visible at the time of the click, it needs to be hidden first.
Is there an elegant way of doing this or will I have to switch from slideToggle() to hide() and show() with conditionals?
Toggle is not always a good option. It is only useful for simple open/close items.
Try something that operates specifically on the chosen item and all the unselected ones (using not).
http://jsfiddle.net/gu6w8Lxb/
$( ".item-title" ).click(function() {
var $this = $(this);
$( ".item-title" ).not($this).removeClass("item-active").next().slideUp();
$this.addClass("item-active").next().slideDown();
});
Which can shorten further to:
var $items = $(".item-title");
$items.click(function() {
var $this = $(this);
$items.not($this).removeClass("item-active").next().slideUp();
$this.addClass("item-active").next().slideDown();
});
if you want the current item to toggle open/closed, test for its active class:
http://jsfiddle.net/gu6w8Lxb/1/
var $items = $(".item-title");
$(".item-title").click(function () {
var $this = $(this);
if ($this.hasClass("item-active")) {
$this.removeClass("item-active").next().slideUp();
} else {
$items.not(this).removeClass("item-active").next().slideUp();
$this.addClass("item-active").next().slideDown();
}
});