Multiple jQuery panel slides -

I am new to jQuery and here I am following the tutorial for a panel slide.

So far so good.

Although I need many panel slides, the page looks like this wapthma / theme / theme /

when you click on an image, the 100% width panel Further information will be expanded below the line to reveal.

Thank you for your help.

Thanks for the j.

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

For a simple example, images are created directly by panels, and when using , when an image is clicked, the next brother element to open.

You can put all the original images and content in a parent device. In this way you will not have to use any class in that paternal diva.

Here is a simple slider system that degrades well if Javascript is turned off.

Let's set up a simple example.

HTML:

  & lt; Div id = "slidercontent" & gt; & Lt; Div & gt; & Lt; Img src = "image1.jpg" /> & Lt; Div & gt; Content about image 1 here. & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "image2.jpg" /> & Lt; Div & gt; Here is another material about image 2. & Lt; P & gt; You can keep as much stuff as you want & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "image3.jpg" /> & Lt; Div & gt; Sample content about image 3 about it. & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

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

It is good in img s nested parent div s, since img s are not elements of block elements , So the line breaks will be good with a parent div and each image has the content div .

div s extends 100% of the width given. You can add child divs to the content divs, you can style them, you can put them in hr s, etc.

Now we build our jQuery. This will make all content sliders invisible. It will also do so that the related slider is toggled when an image is clicked.

script

  $ (function () {$ ("# sliderContent img"). () (.) (); $ ("#Slidercontent img") click (Function () {$ (this) .next (). SlideToggle ();}}}}  

< Of course, you can decorate things with extra graphics and colors, but the central concept is very simple.

Each material here in a DIV There is an easy way to add close buttons. It is not good to include close buttons in HTML, why That is, they are meaningless when javascript is disabled, so we dynamically add them:

  $ (function () {// hide and close ("& lt; input" + 'type = "Button" value = "close" />); $ ("#sliderContent img") Click (function () {$ (this) .next (). SlideToggle ();}); // Usage Click the Parent () Close button to work on $ ("Input"). (Function () {$ (this) .Parent (). SlideUp ();});});