Multiple jQuery panel slides

Question

Hi,

I'm new to jQuery and have been following the tutorial here for a Panel Slide. http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/all-comments/#comments

So far so good.

Though I require a number of panel slides. The page is going to look very similar to this woothemes.com/themes/

When you click an image a 100% width panel will expand under the row to reveal further information.

I was just wondering if there's an alternative to using unique classes for each different image?

Hope that made sense.

Thanks for your help.

J.

Answer 1

Instead of classes, you can make use of the relative positions of the elements in the DOM.

A simple example is to have images followed directly by panels, and make use of .next() when an image is clicked on to slide open the next sibling element.

You can put all of the images and contents into one parent div. That way you don't have to use any classes inside that parent div.

Here's a simple slider system that degrades nicely if Javascript is turned off.

Let's set up a simple example.

The HTML:

<div id="sliderContent">

    <div>
        <img src="image1.jpg" />
        <div>Content about image1 here.</div>
    </div>

    <div>
        <img src="image2.jpg" />
        <div>Other content about image2 here.
             <p>You can put as much stuff in these as you want</p>
        </div>
    </div>

    <div>
        <img src="image3.jpg" />
        <div>Sample content about image3 her here.</div>
    </div>

</div>

The above content will display in a sensible fashion even if Javascript is turned off.

It's nice to have the imgs nested in parent divs, since imgs aren't block level elements, so the line breaks will be nicer with a parent div containing each image and content div.

divs take up 100% of the width given. You can add child divs in the content divs, you can style them, you can put hrs inside them, etc.

Now let's create our jQuery. It'll make all the content sliders invisible. It will also make it so that the corresponding slider is toggled if an image is clicked.

The Script

$(function() {

    $("#sliderContent img").next().hide();

    $("#sliderContent img").click(function() {
        $(this).next().slideToggle();

    });
});​

jsFiddle example

And that's it. Of course you can spruce things up with added graphics and colors, but the central concept is very simple.

Here is a simple way to add a close button into each content DIV. It's not good to include the close buttons in the HTML, since they are meaningless if Javascript is disabled, so we add them dynamically:

$(function() {

     // Hide and add a close button to each content div slider
   $("#sliderContent img").next().hide().append('<input ' + 
                                                'type="button" value="close"/>');

    $("#sliderContent img").click(function() {
        $(this).next().slideToggle();
    });

      // use .parent() to make the close buttons work
    $("input").click(function() {
        $(this).parent().slideUp();
    });
});​

jsFiddle example