how about if you click the item that is open and you click that item again...how would you make it close? And does the contents of the menu have to be wrapped in <LI> tags? Rob
On Sun, Oct 5, 2008 at 5:34 PM, Alex <[EMAIL PROTECTED]> wrote: > > i have managed to pull this off pretty well, with no apparent > glitch's > > http://www.renderrobot.com/?p=33 > > as explained to make it load closed just remove the "open" class from > the html, should do the trick > > > On Sep 12, 8:34 pm, "Rob Fletcher" <[EMAIL PROTECTED]> wrote: > > Noone knows how to stabilize the animation and make this run better? > > > > On Fri, Sep 12, 2008 at 11:42 AM, RFletcher <[EMAIL PROTECTED] > >wrote: > > > > > 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. > > > > > $(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> >
