jQuery Solution Needed For Code Used In WordPress Loop WordPress
- SOLVED
Hi,
I'm using this jQuery code:
$(document).ready(function(){
//Open/Close with Open/Close Buttons
$('.product_info').hide().before('<a href="#" id="open-example1" class="button">Open Details ↓</a>');
$('.product_info').append('<a href="#close-example1" id="close-example1" class="button">Close Details ↑</a>');
$('a#open-example1').click(function() {
$('.product_info').slideDown(400);
return false;
});
$('a#close-example1').click(function() {
$('.product_info').slideUp(1000);
return false;
});
});
That is tied to this bit of HTML markup that is to be included in a WordPress loop:
<div class="box">
<div class="product_info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>
<p>Pellentesque nec magna ipsum. Nullam aliquam dignissim metus eget gravida. Proin erat erat, condimentum quis condimentum vehicula, molestie at mauris. </p>
</div>
</div> <!-- box -->
The jQuery adds the functionality to show and hide this content.
A working example can be seen here: http://jsfiddle.net/Lv4ca/
The problem is that when you click on the "Open Details" link, it will open up all the elements.
But it should only open up and then subsequently close the actually selected element.
Not all at the same time.
Looking into this, I have seen explanations with possible solutions:
http://www.jquery4u.com/jquery-functions/jquery-each-examples
http://css-plus.com/2011/09/master-the-jquery-for-each-loop/
But I really have no idea how to put it to use.
Perhaps it's not even what is needed, but it did appear to be relevant, so I thought to post it here as well.
Your input is much appreciated!
Answers (7)
Michael Caputo answers:
My Jquery knowledge is limited, but try using the :first selector.
$('a#open-example1').click(function() {
$('.product_info:first').slideDown(400);
return false;
});
$('a#close-example1').click(function() {
$('.product_info:first').slideUp(1000);
return false;
});
Edwin comments:
Unfortunately did not work completely as I needed. It opens up one element without opening up the other elements at the same time, but once one is opened you can't open up other elements.
But perhaps I needed to clarify this better, my bad.
designchemical answers:
Hi,
You can use the following:
$(document).ready(function(){
//Open/Close with Open/Close Buttons
$('.product_info').hide().before('<a href="#" class="open-example button">Open Details ↓</a>').append('<a href="#close-example1" class="close-example button">Close Details ↑</a>');
$('.open-example').click(function(e) {
$(this).next().slideDown(400);
e.preventDefault();
});
$('.close-example').click(function(e) {
$(this).parent().slideUp(1000);
e.preventDefault();
});
});
Edwin comments:
This works excellent!!
Dylan Kuhn answers:
Here's an update to your fiddle that works using next() and parent() on the clicked links:
[[LINK href="http://jsfiddle.net/Lv4ca/3/"]]fiddle update 3[[/LINK]]
Edwin comments:
Thank you! - Works like a charm.
Christianto answers:
This should work..
please try..
$(document).ready(function(){
//Open/Close with Open/Close Buttons
$('.product_info').hide().before('<a href="#" class="open-example" class="button">Open Details ↓</a>');
$('.product_info').append('<a href="#" class="close-example" class="button">Close Details ↑</a>');
$('a.open-example').click(function() {
$(this).next('.product_info').slideDown(400);
return false;
});
$('a.close-example').click(function() {
$(this).parents('.product_info').slideUp(1000);
return false;
});
});
Edwin comments:
Excellent! - Works great.
Rashad Aliyev answers:
this is solution for you :-)
full js kod that you need...
$(document).ready(function(){
//Open/Close with Open/Close Buttons
$('.product_info').hide().before('<a href="#" class="open-example1" class="button">Open Details ↓</a>');
$('.product_info').append('<a href="#close-example1" class="close-example1" class="button">Close Details ↑</a>');
$('a.open-example1').click(function() {
$(this).next().slideDown(400);
return false;
});
$('a.close-example1').click(function() {
$(this).parent().slideUp(1000);
return false;
});
});
that code that i propose to you :-)..please try this..i hope you will like this
$(document).ready(function(){
//Open/Close with Open/Close Buttons
$('.product_info').hide().before('<a href="#" id="open-example1" class="button">Open Details ↓</a>');
$('a#open-example1').toggle(function() {
$(this).text('Close Details ↑');
$(this).next('.product_info').slideDown(400);
return false;
},function() {
$(this).text('Open Details ↓');
$(this).next('.product_info').slideUp(400);
return false;
});
});
Edwin comments:
Thank you Rashad, I really like what you did with the second code proposal. The first one didn't work though.
John Cotton answers:
Try changing the slide up/down lines to this:
$(this).slideUp(1000);
$(this).slideDown(400);
Edwin comments:
Unfortunately did not work.
AdamGold answers:
Your jQuery should be:
$(document).ready(function(){
for(var index = 0; index < $('.product_info').length; index++){
$('.product_info').eq(index).attr('id', 'info-' + index);
$('.product_info').eq(index).hide().before('<a href="#" id="open-' + index + '" class="button open-example">Open Details ↓</a>');
$('.product_info').eq(index).append('<a href="#" id="close-' + index + '" class="button close-example">Close Details ↑</a>');
}
//Open/Close with Open/Close Buttons
$('.open-example').click(function() {
elem_id = $(this).attr('id');
open_id = elem_id.replace('open-', '');
$('#info-' open_id).slideDown(400);
return false;
});
$('.close-example').click(function() {
elem_id = $(this).attr('id');
close_id = elem_id.replace('close-', '');
$('#info-' close_id).slideUp(1000);
return false;
});
});
Edwin comments:
Unfortunately did not work.