CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
practical
practical

Reputation: 79

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?

Upvotes: 2

Views: 2006

Answers (1)

Benjamin L&#252;scher
Benjamin L&#252;scher

Reputation: 412

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

Upvotes: 1

Related Questions