TUTORIAL LESSON 1: Accordian

Difficulty rating: 3.5/5

Description:

Yummy in my Tummy

mussels

Spain

spain

Party

party

Step 1: Installation

To start you need to add the jQuery library to you HTML page before the closing body tag.

Step 2: Import jQuery

Insert the jQuery Library link from Step 1 to your HTML page before the closing body tag. This is what makes your code to work on any browser.

		
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        

Step 3: Accordion Javascript

Add the following the script over to you scripts folder or at the bottom of your body page before the closing body tag.

Javascript

   		
    $('.accordion-demo > img').hide();

    $('.01').show();

    var stuffShow = $('.accordion-demo h4');

    stuffShow.click(function() {

    var thisPane = $(this).next();

    if(thisPane.is(':visible')){
    thisPane.slideToggle();

    }else{

    $('.accordion-demo > img:visible').slideToggle();
    $(this).next().slideToggle();
    };
    });
        

Step 4: Implement Content...

Attach HTML & CSS content to your code.

HTML

		
            <div class="accordion-demo">
            <h4>Yummy in my Tummy</h4>
            <img class="01" src="images/mussel.jpg" alt=" mussels">
            <h4>Dog sample 2</h4>
            <img src="images/header-750w.jpg" alt="spain">
            <h4>Dog sample 3</h4>
            <img src="images/party.png" alt="party">
            </div>
        

CSS

		
                .accordion-demo {
                display: block;
                width: 100%;
                height: auto;
                }

                .accordion-demo img {
                width: 492px;
                display: block;
                }

                h4 {
                color: #000000;
                line-height: 1.5em;
                text-align: center;
                background-color:
                #cd8066;
                width: 492px;
                cursor: pointer;
                border-bottom: 1px solid
                #ffae62;
                }
        

Step 4: Click

Go celebrate, you did it!!!