Solved

Multiple vertical sliding panels for social media links

Posted on 2013-06-25
5
354 Views
Last Modified: 2013-07-02
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
Comment
Question by:aliciabutler
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 39274433
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39275413
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39276157
@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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39276594
$(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
 

Author Closing Comment

by:aliciabutler
ID: 39293286
Works beautifully!  Thanks both of you
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Javascript Regex 7 20
arrays and buttons with user input 2 34
Session on Html 8 41
Execute jQuery after Function 4 10
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question