CODEWITHSUNDEEP
javascriptjquerycsssassexpand
Mike K.
Mike K.

Reputation: 277

Expand a Div Using jQuery

I'd like to expand .neo_accord_content_upon clicking a button referred to as .neo_expand_button. I've found several solutions but none seem to work in my case

Here is my HTML:

 <body>
 <div id="neo_wrapper"> <!-- Wrapper start -->
<div id="neo_container">    <!-- Container start -->
    <div id="neo_header">   <!-- Header start -->
        <div class="neo_logo">
            <img src="http://fpoimagery.com/?t=px&w=200&h=100&bg=0ff&fg=000000" />
        </div>
        <div id="neo_main_nav"> <!-- Main navigation -->
            <ul>
                <li>About Us</li>
                <li>Services</li>
                <li>Portfolio</li>
                <li>Brokerage</li>
                <li>Tenant Portal</li>
            </ul>
        </div>  <!-- Main navigation end -->
    </div>  <!-- Header end -->
    <div id="neo_home_image">
    </div>
    <div id="neo_about_section">
        <div class="text_container">
            <h1>About the Grossman Companies</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 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.</p>
        </div>
        <div class="about_button">
            <p>Read More</p>
        </div>
    </div>  <!-- About section end -->
    <div id="neo_accord_section">   <!-- Accord section start -->
        <div class="neo_accord">
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Acquisitions</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
            <div class="neo_accord_content">
                <div class="text_container">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 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.</p>
                </div>
            </div>
        </div>
        <!--<div class="neo_accord">    
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Private Lending</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
             <div class="neo_accord_content">
            </div>
        </div>-->
         <!--<div class="neo_accord">
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Private Lending</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
             <div class="neo_accord_content">
            </div>
        </div>
         <div class="neo_accord">
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Private Lending</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
             <div class="neo_accord_content">
            </div>
        </div>-->
    </div>  <!-- Accord section end -->
</div>  <!-- Container end -->
 </div> <!-- Wrapper end -->
 </body>

My SASS:

body, html { 
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

#neo_wrapper {  /* Wrapper for entire page */
width: 100%;
height: 1800px;
margin: 0 auto;
background-color:#333;

#neo_container {    /* Main content container */
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background:#999999;

    #neo_header {   /* Header for logo, navigation */
        width: 100%;
        height: 100px;
        background-color:#666666;

        .neo_logo { /* Grossman logo */
            float: left;
            width: 200px;
            height: 100px;
        }

        #neo_main_nav { /* Main navigation */
            float: left;
            margin: 55px 0 0 500px;

            ul {list-style: none; padding-left: none; color: #FFF; font-size: 18px;}
            li {
                float: left; margin: 10px;
                a {
                    /* Formatting for list items */
                    &:link {text-decoration: none; color: #FFFFFF;}
                    &:hover {color: #CCC; background-color: #333;}
                    &:active {color: #222; background-color: #222;}
                    &:visited {text-decoration:none; color: #FFF; background-color: #222;}
                }
            }
        }   /* Nav end */
    }   /* Header end */

    .text_container {   /* Container for centered text */
        width: 500px;
        text-align: center;
        color:#000;
        margin: 0 auto;
    }

    #neo_home_image {   /* Fullbleed image */
        width: 100%;
        height: 400px;
    }

    #neo_about_section {    /* About section */
        width: 100%;
        height: 200px;
        background: #FFF;

        .about_button {
            width: 150px;
            height: 35px;
            background-color:#222;
            color: #FFF;
            text-align: center;
            line-height: 35px;
            margin: 0 auto;
            margin-top: 15px;
            cursor: pointer;
            display: table;
        }
    } /* About section end */

    #neo_accord_section {
        width: 100%;
        height: 700px;

        .neo_accord {   /* Drop down sections */
            width: 100%;
            height: 100px;
            background: #222;
            border: solid #FFF 1px;

            .neo_accord_header {    /* Header area in accordion section */
                width: 100%;
                height: 100px;
                background: #222;

                h1.neo_accord_headertext {
                    margin: 0 auto;
                    text-align: center;
                    font-size:24px;
                    color: #FFF;
                }

                .neo_expand_button {
                    width: 200px;
                    height: 35px;
                    background:#F00;
                    line-height: 35px;
                    text-align: center;
                    color: #FFF;
                    display: table;
                    cursor: pointer;
                    margin: 0 auto;
                    margin-top: 15px; 
                }
            }   /* End accordion header */

            .neo_accord_content {
                display: none;              
                background:#CCC;
                color: #000;
                width: 100%;
                height: 150px;
                margin: 0 auto;
            }
        }   /* Accord container end */
    }   /* Accord section end */

}   /* Container end */
}   /* Wrappper end */

And JQuery:

// JavaScript Document
$(document).ready(function () {;
$("#neo_home_image").backstretch("http://fpoimagery.com/?t=px&w=960&h=400&bg=0ff&fg=000000 ");

$(".neo_expand_button").click(function () {
    $(this).find('.neo_accord_content').slideToggle("slow");
    //alert ("hello");
});
});

And here is my jsFiddle: http://jsfiddle.net/6brxu/

Upvotes: 0

Views: 129

Answers (1)

Jason
Jason

Reputation: 4149

http://jsfiddle.net/6brxu/2/

$(document).ready(function () {;

    $(".neo_expand_button").click(function (e) {
        e.preventDefault();

        $('.neo_accord_content').slideToggle("slow");
    });
});

Your previous Javascript was searching for the class ".neo_accord_content" with ".neo_expand_button". I changed it to search the page for that class.

Upvotes: 1

Related Questions