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

Question

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?

Can you please show your HTML code and actual output? Also what exactly are you trying to achieve? — Smit Raval
– Smit Raval, Commented Mar 27, 2018 at 11:20

Benjamin Lüscher · Accepted Answer · 2018-03-27 11:46:35Z

1

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

edited Mar 27, 2018 at 11:46

answered Mar 27, 2018 at 11:24

Benjamin Lüscher

4125 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

practical Over a year ago

Hi, I am aware of this. How does this help with the area of the question that I am actually struggling with though? I'm not saying it doesn't but it's not very clear

practical Over a year ago

I have implemented this code now, and it has made things a lot cleaner. I have edited the main post to reflect this.

practical Over a year ago

Amazing! You are the man. Is there a jQuery way to make these div's hidden by default? I have set them as display:none; in CSS for now

Benjamin Lüscher Over a year ago

Don't think so because jQuery is a javascript library. You do it right with the css in my opinion :)

practical Over a year ago

Thanks again for your help!

Collectives™ on Stack Overflow

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

EDIT/UPDATE:

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT/UPDATE:

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related