Solved

Multiple vertical sliding panels for social media links

Posted on 2013-06-25
5
352 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
  • 2
  • 2
5 Comments
 
LVL 55

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 55

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
Asp in script 6 37
Making an "H1" a specific color only on a specific page. 3 27
ajax wont trigger twice without a page refresh 7 14
Html input text color the frame line 2 20
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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)

856 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