A jquery-based accordion display details

Today, we want to share an accordion display detail example based on jquery. When you click the top arrow, the item displays the details in the form of an accordion. As follows:

Online preview Source Download

The implemented code.

HTML code:

 <DivAlign= "Center">        <spanclass= "OpenZone"Zone= "Lestrois"ID= "Autoclicklestrois">Now, OPEN the three!</span>        <Divstyle= "width:800px">            <TableBorder= "0"cellpadding= "Ten"cellspacing= "5"width= "100%">                <TR>                    <TDID= "Col1"valign= "Top"Align= "Center"class= "Allcol">                        <imgsrc= "Arrow.png"class= "OpenZone"Zone= "1"ID= "Opener1" />                        <Divclass= "Alltitle"ID= "Title1">MY First</Div>                        <BR>                        <DivID= "Contentzone1"class= "Allcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt UT labore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea Commod o consequat. Duis aute irure dolor in Reprehenderit.</Div>                    </TD>                    <TDID= "Col2"valign= "Top"Align= "Center"class= "Allcol">                        <imgsrc= "Arrow.png"class= "OpenZone"Zone= "2"ID= "Opener2" />                        <Divclass= "Alltitle"ID= "Title2">MY SECOND</Div>                        <BR>                        <DivID= "Contentzone2"class= "Allcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt UT labore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea Commod o consequat. Duis aute irure dolor in Reprehenderit.</Div>                    </TD>                    <TDID= "Col3"valign= "Top"Align= "Center"class= "Allcol">                        <imgsrc= "Arrow.png"class= "OpenZone"Zone= "3"ID= "Opener3" />                        <Divclass= "Alltitle"ID= "Title3">MY Third</Div>                        <BR>                        <DivID= "Contentzone3"class= "Allcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt UT labore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea Commod o consequat. Duis aute irure dolor in Reprehenderit.</Div>                    </TD>                </TR>            </Table>        </Div>    </Div>

CSS code:

#col1{Background-image:URL (img1.jpg);Background-color:#e7e7e7;background-repeat:no-repeat;Height:470px; }#col2{Background-image:URL (img2.jpg);Background-color:#e7e7e7;background-repeat:no-repeat;Height:470px; }#col3{Background-image:URL (img3.jpg);Background-color:#e7e7e7;background-repeat:no-repeat;Height:470px; }. Alltitle{Color:#ffffff;Font-weight:Bold;font-size:20px; }. Allcontent{font-size:17px;Padding-left:100px;text-align: Left; }. OpenZone{padding:0px 10px;cursor:Pointer; }

JS Code:

$ (document). Ready (function () {            $('. OpenZone '). Click (function () {                varZone = $ ( This). attr (' zone '); if(Zone = = ' 1 ') {                    varAutre1 = ' 2 '; varAutre2 = ' 3 '; }                Else if(Zone = = ' 2 ') {                    varAutre1 = ' 1 '; varAutre2 = ' 3 '; }                Else if(Zone = = ' 3 ') {                    varAutre1 = ' 1 '; varAutre2 = ' 2 '; }                if(Zone! = ' Lestrois ') {                    $(' #contentzone ' +autre1). Hide (); $(' #contentzone ' +autre2). Hide (); $(' #col ' + autre1). Animate ({width: ' 70px '}, 200); $(' #col ' + autre2). Animate ({width: ' 70px '}, 200); $(' #col ' + zone. Animate ({width: '}, 200). Queue (function () {                $(' #contentzone ' +zone). Show (); $( This). Dequeue ();                    }); $(' #opener ' +zone). Hide (); $(' #opener ' +autre1). Show (); $(' #opener ' +autre2). Show (); $(' #title ' + zone). CSS ("Font-size", "20px"); $(' #title ' + autre1). CSS ("Font-size", "12px"); $(' #title ' + autre2). CSS ("Font-size", "12px"); }                Else if(Zone = = ' Lestrois ')) {                    $('. Allcol '). Animate ({width: ' 33% '}, 200). Queue (function () {               $('. Allcontent '). Show (); $( This). Dequeue ();                    }); $('. OpenZone '). Show (); $('. Alltitle '). CSS ("Font-size", "20px"); }                return false;        }); });

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/10405

A jquery-based accordion display details