Help with simple jquery slider

[lprintz]

Hi guys!

I’m trying to do something ‘simple’ with a jquery slider and it’s eluding me…I’m sure it’s a syntax thing.

In the script below, the first set works properly as the ‘next’ li toggles (.multCredGroup)

What I’m trying to do in the 2nd group is toggle from an href to open the NEXT li….doesn’t seem to work (.multCredCond)

Can anyone help me out?

This is an example of the link that SUPPOSED to slide open the next li –

<li><a href="">toggle</a></li>
<li>Panel to slide open</li>

The jquery

$('.group, .condition').css("display", "none");
            $('.multCredGroup').click(function() {
                $(this).next('.group').slideToggle(300);
            });
            $('.multCredCond').click(function() {
                $(this).next('li.condition').slideToggle(300);
            });

[shaneisme]

Unfortunately what you’ve posted isn’t enough. If you could set up a CopePen demo of the problem working as far as you can get it we can easily look things over and point the right direction.

If you need help setting up the CodePen demo let me know.

[lprintz]

Here you go!

http://codepen.io/anon/pen/xGmmbG

First open the initial slider (Manage Groups)

What I’m trying to do is have another panel open when clicking ‘Conditions.’ I’d like to use the ‘next’ feature somehow as these lists will be dynamic and don’t want to set specific classes for each.

[shaneisme]

This is arguing semantics here, but in this case it will help you with Google searching. When you click on “Manage Groups”, that’s not considered a slider, but instead an accordion – or possibly drop/slide down.

This is what people would consider a slider (although bloated with features): http://wowslider.com/. These are sometimes also called carousels (and in general people don’t like them).

So, long story short, do you want content to reveal itself by sliding down (eg. drop down) when clicking on “Conditions”, the same as when clicking “Manage Groups”?

[lprintz]

You’ve got it absolutely right

Only difference between the 2 sliding panels is the first opens when clicking the

[shaneisme]

OK – so what you want to search for is a “nested accordion”.

I found one on CodePen: http://codepen.io/brenden/pen/Kwbpyj

Basically you want a single script that’s going to have this action any time it comes across it. All the JS should do is check what’s open within its siblings, not throughout the entire page. If your script only looks at the siblings, and you follow the correct markup patterns, you can reuse the script over and over again (dynamically or not).

I’m not 100% sure if the Pen I found will work in your situation, but the act of coding through it isn’t tough if you’re good with tree traversal.

Set up a click listener on your target, and on 'click': Does this have the “open” class? If yes, close it, if not open it and then (optionally) close any open siblings.

All the animation for sliding down and such should probably be done in CSS, it’s much better on performance these days.

I’m sure if you searched around for “nested accordion” you could find one you can just paste into your project, but I think you’ll find coding it isn’t so difficult to do.

[lprintz]

I made this adjustment and didn’t need to rebuild

$('.multCredCond').click(function() {
       $(this).parent().parent().next().slideToggle(300);
   });

Thanks for your responses shaneisme!

[Author]

Posts