Slicktoggle with two elements

[Ravingdork]

I’m pretty new to jquery and was hoping to get some help. I have the following code on my page: CodePen demo

I need the elements of the first slicktoggle to show by default, but can be hidden by toggling the slicktoggle link.

Conversely, I need the elements of the second slicktoggle to be hidden by default, but can be toggled on and off with the slicktoggle2 link.

Finally, I need each slicktoggle link to also toggle the other slicktoggle’s elements, so that only one section is shown at any given time.

I’ve searched all across the internet for ways to do this, and found some things like accordion, but that doesn’t seem to really work in my case–always either destroying the functionality or the layout of my site page.

I hope that all makes sense.

[Ravingdork]

Here is my CodePen demo. I’ve edited the above post to include it as well.

[Ravingdork]

Thanks Shikkediel, your demo is exactly what I’m looking for! How do I implement it though? I replaced my script with yours, but it only caused everything on the page to break down. Now when I click the buttons, it takes me to the site root. What am I missing?

[Ravingdork]

Before your response, I had dragged and dropped all of the CSS, jquery, and HTML into my site, then replaced all of the placeholders with my actual site content.

Now it’s displaying the first section upon page load as it should, but when I click either button, it collapses. Nothing opens, not even on repeated button presses. Seems it’s only working one way now.

[Ravingdork]

Here.

[Ravingdork]

That worked perfectly! THANK YOU!

[Ravingdork]

The site owner now wants me to make the buttons change colors when they are active, so viewers can more easily tell what section they are in. Normally, this is really simple for me, but because they are not traditional links using traditional CSS code, I’m not really sure how best to proceed. Any help you could provide in this matter would be most appreciated.

[Author]

Posts