We Keep Coding

How to select only headers within a class

I am trying to hide the div if you click only on the header. But my filter does not seem to work. I get the intended function wherever I click on the div. I want to restrict this to only when you click on the header.
<div class="post" onclick="updatenext()">
<h2>Item3</h2>
</div>
<div class="post" onclick="updatenext()">
<h2>Item4</h2>
</div>
<script>
var index=0;
$(".post").hide();
$(".post").eq(0).show();
// Tried this too: $(".post").filter(":header")....
$(":header.post").on("click",
function () {
index=$(this).index();
//console.log($(this).index());
$(this).hide();
$(".post").eq(index).show();
}
);
</script>
I expect the click to work only when clicking on the header element within each div.

Try using only jQuery for the event listener, like this:
<div class="post">
<h2 onclick="updatenext()">Item3</h2>
</div>
<div class="post">
<h2 onclick="updatenext()">Item4</h2>
</div>
<script>
var index = 0;
$(".post").hide();
$(".post").eq(0).show();
$("h2").on("click", function () {
index = $(this).parent().index();
$(this).parent().hide();
$(".post").eq(index).show();
});
</script>

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

Multiple element, same class, get value of one element - jquery

I have this multiple elements with the same class.
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
1
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
2
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
3
</div>
</div>
If I click the the <a> tag on the first div, it should alert the value of .product-list-col value which is 1
if I click the second div of anchor tag, it should alert 2
here's the code for it
$(".dup-class").on('click', function() {
cont = $(this + " .product-list-col").text();
alert(cont);
});
Any solution for this stuff?
Here's the jsfiddle of it: http://jsfiddle.net/Vigiliance/PLeDs/3/

You could use siblings(), the reason why your code doesn't work is because it's selecting all .product-list-col
$(".dup-class").on('click', function () {
cont = $(this).siblings('.product-list-col').text();
alert(cont);
});
or use .next()
$(".dup-class").on('click', function () {
cont = $(this).next('.product-list-col').text();
alert(cont);
});

do this:
$(".dup-class").on('click', function() {
cont = $(this).next().text(); // this is the line where change done
alert(cont);
});
http://jsfiddle.net/PLeDs/2/

how to stop repetition in jquery code?

I'm trying to make a image library and my code contains much repetition. Does anyone of you have an idea on how to make this work better?
Here is a exemple of the code
HTML
<div id="wrapper">
<div id="buttoncont">
<button id="all" type="button">All</button>
<button id="dog" type="button">Dog</button>
<button id="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>
JS
$("#cat").click(function () {
$("img.dog_img").hide();
$("img.cat_img").show();
});
$("#dog").click(function () {
$("img.cat_img").hide();
$("img.dog_img").show();
});
$("#all").click(function () {
$(".cat_img, .dog_img").show();
});

First: you need to set a default selected to make the Toggle work as expected.
Use CSS Classes to make the divs into one group(class) and bind the event to it, see the HTML:
<div id="wrapper">
<div id="buttoncont">
<button id="all" type="button">All</button>
<button class=toggle id="dog" type="button">Dog</button>
<button class=toggle id="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>
And on the Javascript Code, do a function to do it for you and use jQuery Toggle:
function toggleImg(){
$('img.dog_img').toggle();
$('img.cat_img').toggle();
}
$(".toggle").click(function () {
toggleImg();
});
$("#all").click(function () {
$(".cat_img, .dog_img").show();
});
But on the onLoad event of your page Toggle one of they indivually to make it the default selected, this way Toggling the two, always only one will be visible.
$('html').ready(function(){
$('img.cat_img').toggle();
});

function toggleImages(e){
$('img').hide();
$('img.'+e.target.id+'_img').show();
}
$("#cat").click(toggleImages);
$("#dog").click(toggleImages);
$("#all").click(function () {
$(".cat_img, .dog_img").show();
});
<div id="wrapper">
<div id="buttoncont">
<button id="all" type="button">All</button>
<button id="dog" type="button">Dog</button>
<button id="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>

I would do it like this
Keep the html as you have it.
$(".toggle").click(
function() {
$("."+ $(this).attr('id') + "_img").toggle()
}
);
$("#all").click(
function() {
$("img[class$='_img']").show()
}
);
This way you can add as many images and buttons as you want without modifying your javascript
Here is a jsFiddle

You can use this :
$('#buttoncont button').click(function(){
if(this.id=='all'){
$('img').show();
}else{
$('img').hide().filter('.'+ this.id +'_img').show();
}
})
Fiddle : http://jsfiddle.net/b65EL/

An idea
$("#all").click(function(){
$(".cat_img, .dog_img").show();
}
$("#dog, #cat").click(function(){
$("img."+this.id+"_img").toggle();
}

Remove the ID attributes on the buttons unless you need them for something else.
Add a custom attribute to the buttons, such as:
<button id="cat" type="button" image-clicker="cat_img">Cat</button>
Then add this jquery to the page (I didn't test this so you may have to fix minor issues with it):
$(function(){
$("[image-clicker]").each(function(){
var buttonClicked = $(this);
var targetID = buttonClicked.attr("image-clicker");
var targetElement = $("#"+targetID);
$(this).click(function(){
// hide other images
$("[image-clicker]").hide();
targetElement.show();
});
};
});

Depending on the surrounding HTML, you may have to modify this. But with JUST the HTML you've shared, you can do this:
$(document).on('click', 'button', function(){
$('img').hide();
$("." + this.id + "_img").show();
//Workaround for '#all'
if( this.id === 'all' ){
$('img').show();
}
});
You could also modify your HTML to take advantage of the data- attribute:
<div id="wrapper">
<div id="buttoncont">
<button data-show="dog, cat" type="button">All</button>
<button data-show="dog" type="button">Dog</button>
<button data-show="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>
JS (untested, but should work):
$(document).on('click', 'button', function(){
var arrShow = this.getAttribute('data-show').split(/\s*,\s*/);
$('img').hide();
for( var i = arrShow.length; i-- > 0; ){
$('.' + arrShow[i] + '_img').show();
}
});

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