How can I make this shrinking/expanding panel dynamic?

I am trying to create a number of panels that can expand and collapse like an accordion, but more than one can be open at one time. There's an image of an arrow that, when clicked, expands or contracts the panel. Each image of the said arrow has its own unique ID. As of now, I have to create a new onclick event for each image, which in turn causes an event with each respective div. What I want to know is if there’s a way to write only one (javascript or Jquery) function that can respond to any of the click events appropriately.

The text in there is just something I grabbed to add content to the panels. I don't want to cause copyright infringement, so I'll say that the text is kudos to IGN.com. I did not write that text.

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#longDescription1").hide();
            $("#afterDropDown1").hide();
            $("#rightArrow").click(function () {
                $("#beforeDropDown1").hide();
                $("#afterDropDown1").show();
                $("#shortDescription1").hide();
                $("#longDescription1").slideDown("slow");
            });
            $("#downArrow").click(function () {
                $("#longDescription1").slideUp("slow", function () {
                    $("#afterDropDown1").hide();
                    $("#beforeDropDown1").show();
                });
                $("#shortDescription1").show("slow");
            });
            $("#longDescription2").hide();
            $("#afterDropDown2").hide();
            $("#rightArrow2").click(function () {
                $("#beforeDropDown2").hide();
                $("#afterDropDown2").show();
                $("#shortDescription2").hide();
                $("#longDescription2").slideDown("slow");
            });
            $("#downArrow2").click(function () {
                $("#longDescription2").slideUp("slow", function () {
                    $("#afterDropDown2").hide();
                    $("#beforeDropDown2").show();
                });
                $("#shortDescription2").show("slow");
            });
        });



    </script>
    <style type="text/css">
        div.longDescription, div.shortDescription
        {
            text-align: left;
            float: left;
            width: 60%;
        }
        div.panel
        {
            height: 200px;
            display: none;
        }
        p.header
        {
            font-size: 1.5em;
            color: Teal;
        }
    </style>
</head>
<body>
    <div class="afterDropDown" style="width: 60%" id = "afterDropDown1">
        <p class="header">
            Death of the Dynasty.
            <img src="down arrow.jpg" alt="Click to hide." height="20px" width="20px" style="float: right"
                id="downArrow" /></p>
    </div>
    <div class="longDescription" id = "longDescription1">
        <p>
            I am going to put it out there. Like a cat amongst the pigeons. Like a pig escaping
            the sack. Like a festering, drooling Caliban among the rocks of a storm tossed isle.
            And the it, is this: Nintendo is the unquestionable frontrunner when it comes to
            inventing and investing in videogame dynasties.</p>
        <p>
            News? Maybe not. But why is this?</p>
        <p>
            In 2011, Mario celebrated birthday number 25. By now, "Mario" is more than a name.
            Mario is a continued, and continuing, line of videogame royalty.</p>
        <p>
            This is one of Nintendos greatest strengths. Nintendo is like big tobacco. Only,
            you know, nicer. It hooks fans young, and then doesnt let go. Many of us felt like
            we grew up with Mario. Or, if not Mario, Link. The Legend of Zelda series, itself
            over 25 years old, is undeniably a videogame dynasty too.</p>
    </div>
    <div class="beforeDropDown" style="width: 60%" id = "beforeDropDown1">
        <p class="header">
            Death of the Dynasty.
            <img src="right arrow.png" alt="Click to expand" height="20px" width="20px" style="float: right"
                id="rightArrow" /></p>
    </div>
    <div class="shortDescription" id = "shortDescription1">
        <p>
            Will any of todays gaming heroes be able to match the lengthy lifespans of legends
            like Mario or Link? Expand to find out.
        </p>
    </div>
    
    
    
    
    
    <!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
    <div class="afterDropDown" style="width: 60%" id = "afterDropDown2">
        <p class="header">
            Building The Ultimate Zelda.
            <img src="down arrow.jpg" alt="Click to hide." height="20px" width="20px" style="float: right"
                id="downArrow2" /></p>
    </div>
    <div class="longDescription" id = "longDescription2">
        <p>
            "Whats your favorite Zelda?" Its a question Ive heard time and time again, yet
            the truth is I dont have a favorite Zelda. I feel almost every one does something
            unique and different that distinguishes it from the rest of the series in my mind.
            Majoras Mask had its anxious time system and melancholy tone, Wind Waker its gorgeous
            cel-shaded open world; Twilight Princess was a more mechanically refined version
            of Ocarina of Time, Phantom Hourglass pioneered how to make a Zelda game on the
            touch screen before Spirit Tracks perfected it, and Skyward Sword made motion controls
            work.</p>
        <p>
            Yet even a dyed-in-the-wool Zelda fanboy like me has to admit that after a quarter
            century, the series is in danger of going stale. Each Zelda has a wondrous world
            to explore, brain-busting dungeons, quirky characters and moments of serene beauty,
            but they can feel like theyre drawing from the same well too often. The franchise
            could use some shaking up.</p>
        <p>
            Rather than see Zelda go the way of Mega-Man, I figured it was high time to look
            back at some of the most inspired choices the series has made. Which of them could
            be combined to make the (drumroll please)... Ultimate Zelda?</p>
    </div>
    <div class="beforeDropDown" style="width: 60%" id = "beforeDropDown2">
        <p class="header">
             Building The Ultimate Zelda.
            <img src="right arrow.png" alt="Click to expand" height="20px" width="20px" style="float: right"
                id="rightArrow2" /></p>
    </div>
    <div class="shortDescription" id = "shortDescription2">
        <p>
            Is taking the best bits of Link's adventures a recipe for perfection?
        </p>
    </div>
</body>
</html>

fusionking

Newbie Poster

7 posts since Dec 2011

Reputation Points: 10

Solved Threads: 0

3 Months Ago

Show Comments

Yes, the code can indeed be condensed by controlling everything with class names rather than ids. Fortunately most of the necessary classes are already in place.

First give both sections an overall div wrapper:

<div class="section">
...
</div>

This allows us to set a $section variable in the javascript which will act as a "context" each time an arrow is clicked.

Second, give each of the arrow images a class:

<img .... class="rightArrow" /><!-- twice -->
<img .... class="downArrow" /><!-- twice -->

Now, the javascript:

$(document).ready(function() {
	$(".longDescription").hide();
	$(".afterDropDown").hide();
	$(".rightArrow").click(function() {
		var $section = $(this).closest(".section");//context for jQuery selectors below
		$(".beforeDropDown", $section).hide();
		$(".afterDropDown", $section).show();
		$(".shortDescription", $section).hide();
		$(".longDescription", $section).slideDown("slow");
	});
	$(".downArrow").click(function() {
		var $section = $(this).closest(".section");//context for jQuery selectors below
		$(".longDescription", $section).slideUp("slow", function() {
			$(".afterDropDown", $section).hide();
			$(".beforeDropDown", $section).show();
		});
		$(".shortDescription", $section).show("slow");
	});
});

Untested

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,682 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

How can I make this shrinking/expanding panel dynamic?

This question has already been solved