We Keep Coding

Showing and hiding a div with JS/jQuery in a Wordpress loop

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; ?>

Get next or previous element in array by clicking prev or next button

I have the following problem:
I have two divs, only one of these is shown and when I click the next or the previous button the other one is shown and the one which was visible is set to hidden. The div which is shown has the "active" class. Now, I need to get the id of the div which has this class. The problem is that I always get the id of the previous one because when I click the button I get first the id and then the class is changed..and I don't know why, also if the code which change the class is written before the code which get the id.
How can I fix this?
<div class="item <?php if($i == 1) echo 'active';?>" id="<?php echo $dati['id'];?>">
<div class="container">
<div class="carousel-content">
<h1><?php echo $dati['titolo'];?></h1>
<p class="lead">
<?php echo $desc_feed;?>
</p>
</div>
</div>
</div>
<a class="prev" href="#main-slider" id="next-carousel" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" id="prev-carousel" data-slide="next"><i class="icon-angle-right"></i></a>
function show_feed_data(id)
{
get_feed_data(id);
}
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
</script>

Its because you are getting the ID of the current active element before it fires the carousel to change the class.
Let's each of the carousel divs are siblings (next to each other) . You can do it like this :
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").prev().attr('id');
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").next().attr("id");
get_feed_data(id_feed_to_show);
});

toggling div and adding and removing class

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');
});
});

Show div on click by Jquery only apply to 1 div at a time

I'm using wordpress and in my loop I have a link that is clickable to toggle a div to show and hide the content, since this is within the loop it uses the same class for each item in the loop so when I toggle one link it shows the content for all.
<div class="additional-info">Additinal Information</div>
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(".additional-info-box").toggle();
});
})
</script>
So the additional-info class and the additional-info-box gets generated for each post, but when I click on any of the additional-info divs every additional info box gets shown.

Try wrapped :
<div class="additional-info">
Additinal Information
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(this).find(".additional-info-box").toggle();
});
})
</script>
with that only the .additional-info clicked will show their content.
Live Demo

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle

if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;

This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here

Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.

Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}