contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Simple Responsive Jquery Accordion

Posted in Javascript Jquery Life at 02 Juli 2017 With 0 Comments

Tutorial kali ini admin akan membuat  responsive accordion dengan Jquery , Accordion dapat berupa menu atau content yang mempunyai efek susun, di dalam menu website atau blog accordion biasa dibuat untuk menampilkan sub-sub menu di dalamnya, accordion content biasanya berada di dalam content / tab, sesuai dengan kebutuhan pengguna, biasanya dibuat untuk menampilkan informasi atau penjelasan dari judul besarnya.. So sebenarnya accordion merupakan sebuah seni bagi seorang web developer untuk mendesain website nya agar website terlihat tujuannya sampai terhadap pembaca website tersebut..

membuat accordion Responsive

Simple Responsive Jquery Accordion

Berikut ini merupakan script HTML lengkap yang digunakan untuk membuat accordion

Demo Download

<!DOCTYPE html>
<html>
<head>
    <title>SMK Accordion-http://suckittrees.com</title>

    <!-- Accordion styles -->
    <link rel="stylesheet" href="css/smk-accordion.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <style type="text/css">
        /*Demo styles*/
        body{
            margin: 0;
            padding: 0;
            font-family: 'Helvetica', Arial, sans-serif;
            font-size: 12px;
        }
        .container_demo{
            max-width: 900px;
            margin: 30px auto 100px;
        }
        h2{
            margin: 25px 0 20px;
            text-align: center;
            color: #555;
        }
    </style>

</head>
<body>
    <div class="container_demo">
        <center><a href='http://suckittrees.com/artikel-507/simple-responsive-jquery-acordion.html' target='_blank'>Visit My Tutorial</a></center>
        <h2>Example 1(second section active)</h2>
        <!-- Accordion begin -->
        <div class="accordion_example1">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 2 -->
            <div class="accordion_in  acc_active">
                <div class="acc_head">Section 2</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 3 -->
            <div class="accordion_in">
                <div class="acc_head">Section 3</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

        </div>
        <!-- Accordion end -->

        <h2>Example 2(no active section[closeAble])</h2>
        <!-- Accordion begin -->
        <div class="accordion_example2">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 2 -->
            <div class="accordion_in">
                <div class="acc_head">Section 2</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 3 -->
            <div class="accordion_in">
                <div class="acc_head">Section 3</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

        </div>
        <!-- Accordion end -->

        <h2>Example 3(no expand icons)</h2>
        <!-- Accordion begin -->
        <div class="accordion_example3">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 2 -->
            <div class="accordion_in  acc_active">
                <div class="acc_head">Section 2</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 3 -->
            <div class="accordion_in">
                <div class="acc_head">Section 3</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

        </div>
        <!-- Accordion end -->

        <h2>Example 4(multiple open)</h2>
        <!-- Accordion begin -->
        <div class="accordion_example4">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 2 -->
            <div class="accordion_in acc_active">
                <div class="acc_head">Section 2</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 3 -->
            <div class="accordion_in acc_active">
                <div class="acc_head">Section 3</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 4 -->
            <div class="accordion_in">
                <div class="acc_head">Section 3</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

        </div>
        <!-- Accordion end -->

        <h2>Example 5(single section[closeAble])</h2>
        <!-- Accordion begin -->
        <div class="accordion_example5">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

        </div>
        <!-- Accordion end -->

        <h2>Example 6( init by css class)</h2>
        <!-- Accordion begin -->
        <div class="accordion_example6">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 2 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

        </div>
        <!-- Accordion end -->

        <!-- Accordion begin -->
        <div class="accordion_example6">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

            <!-- Section 2 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>

        </div>
        <!-- Accordion end -->
        

        <h2>Example 7( active index [activeIntex: 2] / list style )</h2>
        <!-- Accordion begin -->
        <ul class="accordion_example7">
        
            <!-- Section 1 -->
            <li class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </li>

            <!-- Section 2 -->
            <li class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </li>

            <!-- Section 3 -->
            <li class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </li>

        </ul>
        <!-- Accordion end -->
        

        <h2>Example 8( minimum markup )</h2>
        <!-- Accordion begin -->
        <div class="accordion_example8">
        
            <!-- Section 1 -->
            <div>
                <div> Section 1 </div>
                <div> <!--TEXT--> </div>
            </div>

            <!-- Section 2 -->
            <div>
                <div> Section 2 </div>
                <div> <!--TEXT--> </div>
            </div>

            <!-- Section 3 -->
            <div>
                <div> Section 3 </div>
                <div> <!--TEXT--> </div>
            </div>

        </div>
        <!-- Accordion end -->

        <h2>Example 9( nested accordions)</h2>
        <!-- Accordion begin -->
        <div class="accordion_example9">
        
            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head">Section 1</div>
                <div class="acc_content">
                    <!-- Your text here. For this demo, the content is generated automatically. -->
                </div>
            </div>
            <!-- Section 2 -->
            <div class="accordion_in">
                <div class="acc_head">Level 1</div>
                <div class="acc_content nodemohtml">
                    
                    <!-- Child Accordion 1 begin -->
                    <div class="accordion_example9">
                    
                        <!-- Section 1 -->
                        <div class="accordion_in">
                            <div class="acc_head">Section 1</div>
                            <div class="acc_content">
                                <!-- Your text here. For this demo, the content is generated automatically. -->
                            </div>
                        </div>
                        <!-- Section 2 -->
                        <div class="accordion_in">
                            <div class="acc_head">Level 2</div>
                            <div class="acc_content nodemohtml">

                                <!-- Child Accordion 2 begin -->
                                <div class="accordion_example9">
                                
                                    <!-- Section 1 -->
                                    <div class="accordion_in">
                                        <div class="acc_head">Section 1</div>
                                        <div class="acc_content">
                                            <!-- Your text here. For this demo, the content is generated automatically. -->
                                        </div>
                                    </div>
                                    <!-- Section 2 -->
                                    <div class="accordion_in">
                                        <div class="acc_head">Level 3</div>
                                        <div class="acc_content nodemohtml">
                                                                    
                                            <!-- Child Accordion 3 begin -->
                                            <div class="accordion_example9">
                                            
                                                <!-- Section 1 -->
                                                <div class="accordion_in">
                                                    <div class="acc_head">Section 1</div>
                                                    <div class="acc_content">
                                                        <!-- Your text here. For this demo, the content is generated automatically. -->
                                                    </div>
                                                </div>
                                                <!-- Section 2 -->
                                                <div class="accordion_in">
                                                    <div class="acc_head">Section 2</div>
                                                    <div class="acc_content">
                                                        <!-- Your text here. For this demo, the content is generated automatically. -->
                                                    </div>
                                                </div>

                                            </div>
                                            <!-- Child Accordion 3 end -->

                                        </div>
                                    </div>

                                </div>
                                <!-- Child Accordion 2 end -->

                            </div>
                        </div>

                    </div>
                    <!-- Child Accordion 1 end -->

                </div>
            </div>

        </div>
        <!-- Accordion end -->




    </div>


    <script type="text/javascript" src="js/smk-accordion.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($){

            $(".accordion_example1").smk_Accordion();

            $(".accordion_example2").smk_Accordion({
                closeAble: true, //boolean
            });

            $(".accordion_example3").smk_Accordion({
                showIcon: false, //boolean
            });

            $(".accordion_example4").smk_Accordion({
                closeAble: true, //boolean
                closeOther: false, //boolean
            });

            $(".accordion_example5").smk_Accordion({closeAble: true});

            $(".accordion_example6").smk_Accordion();
            
            $(".accordion_example7").smk_Accordion({
                activeIndex: 2 //second section open
            });
            $(".accordion_example8, .accordion_example9").smk_Accordion();


            // Demo text. Let's save some space to make the code readable. ;)
            $('.acc_content').not('.nodemohtml').html('<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Fusce aliquet neque et accumsan fermentum. Aliquam lobortis neque in nulla  tempus, molestie fermentum purus euismod.</p>');
            
        });
    </script>
</body>
</html> 

 Demo Download

▼ Download Source Code Dibawah Ini ▼


Artikel Rekomendasi



Artikel Terkait

Diskusi