SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Question -- need some help...

    I am making an accordian menu with 4 main buttons. All buttons should
    be closed at start. When you click 1 button the content area should
    slide down and then the content should fade-in. I have for the most
    part written the script to create this effect however i see some
    glitches with it. When you click the next tab i can see the two
    buttons at the bottom moving up and down slightly. Its not a huge
    deal, but i would rather them not move at all. I only want the button
    i click to move.
    Here is my script, please let me know if there is a better way to
    write this as many google searches didn't reveal anything good. I'm
    sure someone else has wanted to make an accordian menu (slide and then
    fade-in) effect.

    <code>

    $(document).ready(function() {
    $("dd").hide();
    $("span").hide();
    $("dt a").click(function () {
    $("span").fadeOut(100);
    $("dd:visible").slideUp("slow");
    $(this).parent().next().slideDown("slow", function () {
    $("span").fadeIn("slow");
    });
    return false;
    });
    });

    And my HTML code looks like this:
    <dl>
    <dt><a href="#" class="button1"></a></dt>
    <dd>
    <div id="ContentBox">
    <span class="msg_body">
    <div id="box1">
    <h1>Loreum Ipsum</h1>
    <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
    consequat qui Investigationes Investigationes. Ut quam me gothica
    dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
    et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
    facilisis et nis4</p>
    <h1>Loreum Ipsum</h1>
    <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
    euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
    Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
    hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
    nis4</p>
    </div>
    </span>
    </div>
    </dd>
    </dl>
    <dl>
    <dt><a href="#" class="button2"></a></dt>
    <dd>
    <div id="ContentBox">
    <span class="msg_body">
    <div id="box2">
    <h1>Loreum Ipsum</h1>
    <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
    consequat qui Investigationes Investigationes. Ut quam me gothica
    dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
    et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
    facilisis et nis4</p>
    <h1>Loreum Ipsum</h1>
    <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
    euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
    Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
    hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
    nis4</p>
    </div>
    </span>
    </div>
    </dd>
    </dl>
    <dl>
    <dt><a href="#" class="button3"></a></dt>
    <dd>
    <div id="ContentBox">
    <span class="msg_body">
    <div id="box3">
    <h1>Loreum Ipsum</h1>
    <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
    consequat qui Investigationes Investigationes. Ut quam me gothica
    dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
    et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
    facilisis et nis4</p>
    <h1>Loreum Ipsum</h1>
    <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
    euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
    Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
    hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
    nis4</p>
    </div>
    </span>
    </div>
    </dd>
    </dl>
    <dl>
    <dt><a href="#" class="button4"></a></dt>
    <dd>
    <div id="ContentBox">
    <span class="msg_body">
    <div id="box4">
    <h1>Loreum Ipsum</h1>
    <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
    consequat qui Investigationes Investigationes. Ut quam me gothica
    dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
    et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
    facilisis et nis4</p>
    <h1>Loreum Ipsum</h1>
    <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
    euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
    Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
    hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
    nis4</p>
    </div>
    </span>
    </div>
    </dd>
    </dl>

    </code>

  2. #2
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After reviewing some other accordian menus i noticed that they all do this same little jittery dance at the bottom. So, I'm thinking there is no way to fix it.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •