logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$30
jQuery Solution Needed For Code Used In WordPress Loop

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 &darr;</a>');

			$('.product_info').append('<a href="#close-example1" id="close-example1" class="button">Close Details &uarr;</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!

This question has been answered.

Edwin | 06/07/12 at 9:27am Edit

Previous versions of this question: 06/07/12 at 10:45am

(7) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    06/07/12
    9:36am
    Michael Caputo says:

    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;
    

    
			});

    • 06/07/12 10:59am

      Edwin says:

      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.

  • avatar
    Last edited:
    06/07/12
    9:37am
    John Cotton says:

    Try changing the slide up/down lines to this:

    $(this).slideUp(1000);

    $(this).slideDown(400);

    • 06/07/12 10:58am

      Edwin says:

      Unfortunately did not work.

  • avatar
    Last edited:
    06/07/12
    9:39am
    AdamGold says:

    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 &darr;</a>');
    
    $('.product_info').eq(index).append('<a href="#" id="close-' + index + '" class="button close-example">Close Details &uarr;</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;
    

    
			});
    

    
		});

    • 06/07/12 10:57am

      Edwin says:

      Unfortunately did not work.

  • avatar
    Last edited:
    06/07/12
    9:46am
    designchemical says:

    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 &darr;</a>').append('<a href="#close-example1" class="close-example button">Close Details &uarr;</a>');
    

    
			$('.open-example').click(function(e) {
    

    
				$(this).next().slideDown(400);
    

    
				e.preventDefault();
    

    
			});
    

    
			$('.close-example').click(function(e) {
    

    
				$(this).parent().slideUp(1000);
    

    
				e.preventDefault();
    

    
			});
    

    
		});

    Previous versions of this answer: 06/07/12 at 9:46am

    • 06/07/12 10:57am

      Edwin says:

      This works excellent!!

  • avatar
    Last edited:
    06/07/12
    9:45am
    Dylan Kuhn says:

    Here's an update to your fiddle that works using next() and parent() on the clicked links:

    fiddle update 3

    Previous versions of this answer: 06/07/12 at 9:45am

    • 06/07/12 10:56am

      Edwin says:

      Thank you! - Works like a charm.

  • avatar
    Last edited:
    06/07/12
    9:45am
    Christianto says:

    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 &darr;</a>');
    
    $('.product_info').append('<a href="#" class="close-example" class="button">Close Details &uarr;</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;
    
    });
    
});​

    • 06/07/12 10:56am

      Edwin says:

      Excellent! - Works great.

  • avatar
    Last edited:
    06/07/12
    10:21am
    Rashad Aliyev says:

    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 &darr;</a>');
    
            $('.product_info').append('<a href="#close-example1" class="close-example1" class="button">Close Details &uarr;</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 &darr;</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;
    
            });
    
        });​

    Previous versions of this answer: 06/07/12 at 9:50am | 06/07/12 at 9:51am | 06/07/12 at 9:55am | 06/07/12 at 10:21am

    • 06/07/12 10:56am

      Edwin says:

      Thank you Rashad, I really like what you did with the second code proposal. The first one didn't work though.

This question has expired.



Gabriel Reguly had additional discourse to offer.

Gabriel Reguly, Edwin, Francisco Javier Carazo Gil voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.