WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Some jQuery Animate question (2 posts)

  1. Archie22is
    Member
    Posted 1 year ago #

    First and foremost, my jQuery really sucks. I have a 'ul' in a WordPress loop that renders the following output - the 'li' tags are the individual posts within the loop.

    <ul id="list">
    <li class="box">
        <div class="front">
            <h3> Some Front Stuff </h3>
            <p> Some front paragraph...</p>
        </div>
        <div class="back">
            <h3> Some back Stuff </h3>
            <p> Some back stuff.. </p>
        </div>
    </li>
    <li class="box">
        <div class="front">
            <h3> Some Front Stuff </h3>
            <p> Some front paragraph...</p>
        </div>
        <div class="back">
            <h3> Some back Stuff </h3>
            <p> Some back stuff.. </p>
        </div>
    </li>
    etc...etc..etc

    What I want is something that can be viewed here: http://www.aatsol.co.za/temp/some_jquery/

    I simply want the user to click on the "View more details" and have the second div slide over the first to display the contact details which are on the "back div"

    The other thin is I want only the 'X' to appear on the contact details - to allow the user to close the windows and return to the first div. I have tried to do something but I can't get any further - 2 weeks working on 3 lines of jQuery. You help is highly appreciated.

    My jQuery:

    $(document).ready(function() {
    $(".box").click(function(){
        $(this).find('.inner').stop().animate({top:0});
    });
    
    // to close back div - not even touched
    $("a.close").click(function(){
        alert("close");
        $(this).find('.inner').stop().animate({top:340});
    });});

    How will I have to tune up the jQuery to get the desired results?

    NB: The jQuery is kinda working on the static html which look 99.9% like my WordPress loop but nothing is happening on the WordPress :-(

  2. Archie22is
    Member
    Posted 1 year ago #

    Hi guys,

    [RESOLVED]
    I has to use "toggle" in the following jQuery to achieve the results. Will share my answer for anyone who might need it in the near future.

    DIV TOGGLE

    $(".box").toggle(function(){
    	$(this).find(".inner").stop().animate({top:0});
    	},
    function() {
    	$(this).find(".inner").stop().animate({top:340});
    });

Topic Closed

This topic has been closed to new replies.

About this Topic