Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 359
  • Last Modified:

Multiple vertical sliding panels for social media links

I want to create multiple vertical sliding panels on a page for social media links, etc

How can I edit the jquery in this demo please in order to display multiple panels?

http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
0
aliciabutler
Asked:
aliciabutler
  • 2
  • 2
2 Solutions
 
Julian HansenCommented:
What you need to do is give your trigger buttons an id that is in some way linked to their corresponding panel. For instance

class="trigger" id="trigger1"

Then for the panel id would be something like

class="panel" id="trigger1_panel"

The JQuery then becomes as follows

$(document).ready(function(){
	    $(".trigger").click(function(){
	        $("#" + $(this).attr("id") + "_panel").toggle("fast");
	        $(this).toggleClass("active");
	        return false;
	    });
	});

Open in new window

0
 
Chris StanyonCommented:
Rather than concatenating one id from another, why not just use a data attribute to define the expanding div.

$(".trigger").click(function(){
    $("#" + $(this).data("panel")).toggle("fast");
    $(this).toggleClass("active");
});

<div class="trigger" data-panel="panel1">Trigger</div>
<div class="panel" id="panel1">This is a panel</div>

<div class="trigger" data-panel="panel2">Trigger</div>
<div class="panel" id="panel2">This is a panel</div>

<div class="trigger" data-panel="panel3">Trigger</div>
<div class="panel" id="panel3">This is a panel</div>

Open in new window

0
 
Julian HansenCommented:
@Chris ... because that takes more coding and I am a typical lazy programmer.

If the trigger is an <a> you can also put the id in the HRef attribute

The cost of retrieving it is effectively the same in all cases.

In your example you are concactenating the '#' which comes to the same thing. You could put the '#' in the data- attribute as well.

All much of a muchness at the end of the day.
0
 
Chris StanyonCommented:
$(this).attr("id") + "_panel"
$(this).data("panel")

It seems like less coding, but yeah, they're pretty much the same - personally, I just prefer to use the data attribute to store arbitrary data. Always nice to have options though :)
0
 
aliciabutlerAuthor Commented:
Works beautifully!  Thanks both of you
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now