Accordion opening all accordions on page, not collapsing when clicked again.

Question

I am working on a page which I just added an accordion to. It has several different accordions within which when any single one is clicked upon, all open. Upon clicking the accordion again it should collapse, however it just seems to reload the code and keeps all the accordions open.

 $(document).ready(function() { function close_accordion_section() { $('.accordion .accordion-section-title').removeClass('active'); $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function(e) { // Grab current anchor value var currentAttrValue = $(this).attr('href'); if ($(e.target).is('.active')) { close_accordion_section(); } else { close_accordion_section(); // Add active class to section title $(this).addClass('active'); // Open up the hidden content panel $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); } e.preventDefault(); }); }); 

  /*----- Accordion -----*/ .accordion, .accordion * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .accordion { overflow: hidden; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); border-radius: 3px; background: #3bb54a; } /*----- Section Titles -----*/ .accordion-section-title { width: 100%; padding: 15px; display: inline-block; border-bottom: 1px solid #1a1a1a; background: #FFF; transition: all linear 0.15s; /* Type */ font-size: 1.200em; text-shadow: 0px 1px 0px #1a1a1a; color: #fff; } .accordion-section-title.active, .accordion-section-title:hover { background: #FBCB34; /* Type */ text-decoration: none; } .accordion-section:last-child .accordion-section-title { border-bottom: none; } /*----- Section Content -----*/ .accordion-section-content { padding: 15px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"><h3 class="portseparator">Museums &amp; History</h3></a> <div id="accordion-1" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lighthouse.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lighthouse.JPG" style="width:100%;height:auto;" alt="St. Augustine Lighthouse & Maritime Museum"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.staugustinelighthouse.com/">St. Augustine Lighthouse &amp; Maritime Museum</a></h3> <p>America's history will never look the same after a visit to the St. Augustine Lighthouse &amp; Maritime Museum. From the breathtaking views of Northeast Florida to the artifacts recovered from our ancestors' vessels, the St. Augustine Lighthouse &amp; Maritime Museum covers centuries of history from in and around St. Augustine. </p> <h5><a target="_blank" href="http://www.staugustinelighthouse.com/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-fortmatazanas.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-fortmatazanas.JPG" style="width:100%;height:auto;" alt="Fort Matanzas National Monument"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.nps.gov/foma/">Fort Matanzas National Monument</a></h3> <p>Coastal Florida was a major field of conflict as European nations fought for control in the New World. As part of this struggle, Fort Matanzas guarded St. Augustine's southern river approach. The colonial wars are over, but the monument is still protecting—not just the historic fort, but also the wild barrier island and the plants and animals who survive there amidst a sea of modern development.</p> <h5><a target="_blank" href="http://www.nps.gov/foma/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-casillodesanmarcos.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-casillodesanmarcos.JPG" style="width:100%;height:auto;" alt="Castillo de San Marcos"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.nps.gov/casa/index.htm">Castillo de San Marcos</a></h3> <p>A monument not only of stone and mortar but of human determination and endurance, the Castillo de San Marcos symbolizes the clash between cultures which ultimately resulted in our uniquely unified nation. Still resonant with the struggles of an earlier time, these original walls provide tangible evidence of America's grim but remarkable history.</p> <h5><a target="_blank" href="http://www.nps.gov/casa/index.htm">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-pirate&treasure.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-pirate&treasure.JPG" style="width:100%;height:auto;" alt="St. Augustine Pirate & Treasure Museum"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://thepiratemuseum.com">St. Augustine Pirate &amp; Treasure Museum</a></h3> <p>In addition to the world class museum, the property boasts a scenic outdoor courtyard and a large deck that overlooks the historic Matanzas River and the magnificent Castillo de San Marcos, the 17th Spanish fort located directly across the street on the bayfront. The museum spans about 5,000 square ft. with a 1,300-square.-ft. courtyard and an approximate 500-square-ft. upper deck. There are several event packages to choose from that also include museum access.</p> <h5><a target="_blank" href="http://www.thepiratemuseum.com">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"> <h3 class="portseparator">State Parks &amp; Recreation</h3> </a> <div id="accordion-1" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-wildlifereserve.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-wildlifereserve.JPG" style="width:100%;height:auto;" alt="St. Augustine Wild Reserve"> </a> </div> <div class="col-md-6"> <h3><a href="http://www.staugustinewildreserve.org">St. Augustine Wild Reserve</a></h3> <p>Guests will be given a guided tour of the 7-acre animal compound by an experienced wildlife professional. An introduction to each species, basic biology, and how the animal arrived at the sanctuary will be discussed in detail. Visitors will be allowed within 5-10 feet of the exotic animals, which are housed in secure habitats. On the tour there will be tigers, an American black bear, cougars, lynxes, leopards, wolves, and a host of other animals. </p> <h5><a href="http://www.staugustinewildreserve.org"> Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-anastasiastatepark.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-anastasiastatepark.JPG" style="width:100%;height:auto;" alt="Anastasia State Park"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="https://www.floridastateparks.org/park/anastasia">Anastasia State Park</a></h3> <p>Anastasia State Park includes 1,600 acres of rich ecosystems and abundant wildlife. Explore up to four miles of pristine beach, the estuarine tidal marsh teeming with plant and animal life, or the self-guided nature trail which takes you through the maritime hammock and onto ancient sand dunes. You can also visit the Coquina Quarry, an archaeological site where coquina rock was mined to help construct the nearby Castillo de San Marcos National Monument, earning it a spot on the National Register of Historic Places.</p> <h5><a target="_blank" href="https://www.floridastateparks.org/park/anastasia">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-alligatorfarm.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-alligatorfarm.JPG" style="width:100%;height:auto;" alt="Coming Soon"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.alligatorfarm.com/">St. Augustine Alligator Farm Zoological Park</a></h3> <p>The St. Augustine Alligator Farm Zoological Park is one of Florida&#146;s oldest continuously running attractions, having opened on May 20, 1893. Not only does it have 23 species of crocodilians, but also a variety of other reptiles, mammals, and birds, as well as exhibits, animal performances and educational demonstrations. </p> <h5><a target="_blank" href="http://www.alligatorfarm.com">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-beach.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-beach.JPG" style="width:100%;height:auto;" alt="St. Augustine Beach"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.staugustinelighthouse.com/">St. Augustine Beach</a></h3> <p>St. Augustine&#146;s beaches stretch from Vilano Beach north of the city to Crescent Beach in the south. The Intracoastal Waterway naturally divides the mainland from the barrier islands with their miles of gorgeous coastline with many public areas for beach recreation and relaxation.</p> <h5><a target="_blank" href="http://www.oldcity.com/beaches">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"><h3 class="portseparator">Local Golf Courses</h3></a> <div id="accordion-1" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stjohns.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stjohns.JPG" style="width:100%;height:auto;" alt="St. Johns Golf &amp; Country Club"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.stjohnsgolf.com">St. Johns Golf &amp; Country Club</a></h3> <p>St. Johns Golf &amp; Country Club is an extraordinary place located between St. Augustine and Jacksonville. The 18-hole Clyde Johnston-designed course is the community&#146;s centerpiece with just the right amount of challenge for novice and avid golfers alike. A great place to hone your skills, St. Johns is known for its consistent quality of service and conditions.</p> <h5><a target="_blank" href="http:/www.stjohnsgolf.com">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-southampton.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-southampton.JPG" style="width:100%;height:auto;" alt="South Hampton Golf Club"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.golfsouthhampton.com/">South Hampton Golf Club</a></h3> <p>The course has 16 lakes and over 60 bunkers, but the layout is fair. The back nine is a bit more adventurous so do your scoring on the front nine. There is a great variety of holes and you will not be bored playing here. The course is now family owned and all the staff are very friendly and helpful. You can't go wrong playing here as the rates are very reasonable and the course challenging and interesting.</p> <h5><a target="_blank" href="http:/www.golfsouthhampton.com/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-royalgolf.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-royalgolf.JPG" style="width:100%;height:auto;" alt="Royal St. Augustine Golf &amp; Country Club"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.royalstaugustinegolf.com/">Royal St. Augustine Golf Club</a></h3> <p>If you are looking for a course close to downtown, Royal St Augustine is it. The conditions are generally good here and the staff is friendly. This is a very tight golf course and if you are even slightly off the fairways, kiss that golf ball goodbye. Two fairways line the road, if your tee shot missed the narrow fairway, your next shot is from the passing lane of Route 16. However if you want to tee it up near town on a well maintained course, this is a good choice. Just bring plenty of balls, and a straight tee shot.</p> <h5><a target="_blank" href="http://www.royalstaugustinegolf.com/">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"><h4 class="portseparator">Food &amp; Entertainment</h4></a> <div id="accordion-1" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-staugustinedistillery.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-staugustinedistillery.JPG" style="width:100%;height:auto;" alt="St. Augustine Distillery Company"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.staugustinedistillery.com">St. Augustine Distillery Company</a></h3> <p>Take a free tour of the distillery and watch as they mix, mash, cook and distill small batch vodka, rum, gin and whiskey in a historically renovated ice manufacturing plant from 1917. You will learn about the history of ice and distilling in Florida, see the products being made, and then taste their small batch spirits for yourself in the tasting room. There's no charge and tours are every 30 minutes. Come on by!</p> <h5><a target="_blank" href="http://www.staugustinedistillery.com"> Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-sansabastienwine.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-sansabastienwine.JPG" style="width:100%;height:auto;" alt="San Sebastian Winery"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.sansebastianwinery.com/">San Sebastian Winery</a></h3> <p>Today, San Sebastian ranks as one of Florida&#146;s premium wineries, and remains a pioneer in the development of table, sparkling, and dessert wines from hybrid and muscadine grapes. Vintage-dated varietals from hybrids such as Stover and Blanc Du Bois are produced and marketed along with blended and sparkling wines from native Muscadine grapes. Port and Cream Sherry dessert wines are also produced by and sold under the San Sebastian brand.</p> <h5><a target="_blank" href="http://www.sansebastianwinery.com/"> Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <a class="anchorlink" id="events" a name="events"></a> <h3 class="title">Area Events</h3> <p style="color:#0071bc;font-size:1.65em;">St. Augustine is a venue for all types of events large and small, historical and modern, educational and entertaining. Featured events in St. Augustine include annual headliners at the Amphitheatre, exciting new art exhibits, local festivals, seasonal celebrations for holidays, and many other major occasions in the city, including the 450th commemoration. St. Augustine welcomes thousands of visitors every year for the many events it hosts. These include one of the most celebrated, the Nights of Lights, to more local events like the Music by the Sea concerts.</p> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"><h4 class="portseparator">Area Events</h4></a> <div id="accordion-1" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-farmersmarket.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-farmersmarket.JPG" style="width:100%;height:auto;" alt="Third Saturdays Nocatee Farmers Market"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.nocatee.com/">Third Saturdays Nocatee Farmers&#146; Market</a></h3> <h4>February 20, 2016 to December 17, 2016</h4> <p>Nocatee Farmer&#146;s Market takes place from 10:00AM - 2:00PM every third Saturday. This free family-friendly event has over 80 local vendors selling everything from produce, crafts, jewelry, herbs, unique foods and more. Free face painting will be available for the little ones, along with a bounce house.</p> <h5><a target="_blank" href="http://www.nocatee.com/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-cathedralfestival.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-cathedralfestival.JPG" style="width:100%;height:auto;" alt="Cathedral Festival"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://augustine.com/event/cathedral-festival">Cathedral Festival</a></h3> <h4>Friday – Sunday, February 26 - 28, 2016</h4> <p>The 31st Annual Cathedral Festival at the Mission of Nombre de Dios grounds offers fun for the whole family. Located near the giant cross in St. Augustine, visitors are welcome to enjoy the fun rides, games, raffles, bingo, food and art vendors, fireworks and more. Families will enjoy exciting midway rides that are thrilling for all ages including a Ferris wheel, slides and much more.</p> <h5><a target="_blank" href="http://augustine.com/event/cathedral-festival">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lionsseafoodfestival.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lionsseafoodfestival.JPG" style="width:100%;height:auto;" alt="St. Augustine's Lion Seafood Festival"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://augustine.com/event/st-augustine-lions-seafood-festival">St. Augustine&#146;s Lion Seafood Festival</a></h3> <h4>March 4 - 6, 2016</h4> <p>The 35th Annual St. Augustine Lions Seafood Festival features delicious seafood, arts and crafts, live music, family activities, and much more. The festival takes place at Francis Field, Friday – Sunday, March 4 – 6, 2016.</p> <h5><a target="_blank" href="http://augustine.com/event/st-augustine-lions-seafood-festival">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stpattys.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stpattys.JPG" style="width:100%;height:auto;" alt="St. Patrick's Day Parade"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.celticstaugustine.com/st-patricks-day-parade/">St. Patrick's Day Parade</a></h3> <h4>March 12, 2016</h4> <p>St. Augustine's St. Patrick Day Parade is the ONLY St. Patrick's Day Parade in Northeast Florida. The Parade is an annual celebration of St. Augustine's Celtic heritage and the Emerald Isle's most revered saint. With over 800 participants and thousands of spectators, lads and lasses converge upon the Ancient City each year doning their tartans and green attire.</p> <h5><a target="_blank" href="http://www.celticstaugustine.com/st-patricks-day-parade/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-bbqfestival.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-bbqfestival.JPG" style="width:100%;height:auto;" alt="Rhythm & Ribs Festival"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://augustine.com/event/rhythm-ribs-festival">Rhythm &amp; Ribs Festival</a></h3> <h4>Friday - Sunday, April 1 - 3, 2016</h4> <p>The 21st Annual Rhythm &amp; Ribs Festival celebrates delicious barbecue, music and good times with live entertainment and local chefs competing for the best BBQ. This festival includes great live music throughout the weekend, people's BBQ choice awards, a kids zone, mechanical bull, an array of vendors, and much more.</p> <h5><a target="_blank" href="http://augustine.com/event/rhythm-ribs-festival">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-romanza.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-romanza.JPG" style="width:100%;height:auto;" alt="Coming Soon"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.see-staugustine.com/events/romanza-festivale-in-st-augustine-2016-05-08/#.VraiH9A_u9U">Romanza Festivale in St. Augustine</a></h3> <h4>May 6 - 15, 2016</h4> <p>Come to Saint Augustine from May 6 through the 15, 2016 for a celebration of art and music in the Nation's oldest city featuring more than 60 events and exhibits by dozens of organizations. Daily events include music and dance performances, concerts, art shows, dramatic productions and much more at locations throughout the city.</p> <h5><a target="_blank" href="http://www.see-staugustine.com/events/romanza-festivale-in-st-augustine-2016-05-08/#.VraiH9A_u9U">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> 

Answer 1

This is due to all of the accordions sharing the same ID attribute accordion-1 . If you change them to have different numbers at the end of the ID, it should function normally with each opening seperately.

To fix the closing issue, you also need to pass in the element or ID of the accordion you wish to close into the close_accordion_section function. Otherwise it is targeting all accordions. Eg

$(document).ready(function() {
    function close_accordion_section(element) {
        $(element).find('.accordion-section-title').removeClass('active');
        $(element).find('.accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if ($(this).is('.active')) {
            close_accordion_section($(e.target).closest('.accordion'));
        } else {
            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }

        e.preventDefault();
    });
});

Answer 2

The error is:

if ($(e.target).is('.active')) {

This must be changed into:

if ($(e.currentTarget).is('.active')) {

Other errors are the same IDs used.

 $(function () { function close_accordion_section() { $('.accordion .accordion-section-title').removeClass('active'); $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function(e) { e.preventDefault(); // Grab current anchor value var currentAttrValue = $(this).attr('href'); if ($(e.currentTarget).is('.active')) { close_accordion_section(); } else { // Add active class to section title $(this).addClass('active'); // Open up the hidden content panel $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); } }); }); 

 /*----- Accordion -----*/ .accordion, .accordion * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .accordion { overflow: hidden; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); border-radius: 3px; background: #3bb54a; } /*----- Section Titles -----*/ .accordion-section-title { width: 100%; padding: 15px; display: inline-block; border-bottom: 1px solid #1a1a1a; background: #FFF; transition: all linear 0.15s; /* Type */ font-size: 1.200em; text-shadow: 0px 1px 0px #1a1a1a; color: #fff; } .accordion-section-title.active, .accordion-section-title:hover { background: #FBCB34; /* Type */ text-decoration: none; } .accordion-section:last-child .accordion-section-title { border-bottom: none; } /*----- Section Content -----*/ .accordion-section-content { padding: 15px; display: none; } 

 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"><h3 class="portseparator">Museums &amp; History</h3></a> <div id="accordion-1" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lighthouse.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lighthouse.JPG" style="width:100%;height:auto;" alt="St. Augustine Lighthouse & Maritime Museum"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.staugustinelighthouse.com/">St. Augustine Lighthouse &amp; Maritime Museum</a></h3> <p>America's history will never look the same after a visit to the St. Augustine Lighthouse &amp; Maritime Museum. From the breathtaking views of Northeast Florida to the artifacts recovered from our ancestors' vessels, the St. Augustine Lighthouse &amp; Maritime Museum covers centuries of history from in and around St. Augustine. </p> <h5><a target="_blank" href="http://www.staugustinelighthouse.com/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-fortmatazanas.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-fortmatazanas.JPG" style="width:100%;height:auto;" alt="Fort Matanzas National Monument"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.nps.gov/foma/">Fort Matanzas National Monument</a></h3> <p>Coastal Florida was a major field of conflict as European nations fought for control in the New World. As part of this struggle, Fort Matanzas guarded St. Augustine's southern river approahref="http://www.nps.gov/foma/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-casillodesanmarcos.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-casillodesanmarcos.JPG" style="width:100%;height:auto;" alt="Castillo de San Marcos"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.nps.gov/casa/index.htm">Castillo de San Marcos</a></h3> <p>A monument not only of stone and mortar but of human determination and endurance, the y.</p> <h5><a target="_blank" href="http://www.nps.gov/casa/index.htm">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-pirate&treasure.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-pirate&treasure.JPG" style="width:100%;height:auto;" alt="St. Augustine Pirate & Treasure Museum"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://thepiratemuseum.com">St. Augustine Pirate &amp; Treasure Museum</a></h3> <p>In addition to the world class museum, the property boasts a scenic outdoor courtyard and a largt also include museum access.</p> <h5><a target="_blank" href="http://www.thepiratemuseum.com">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-2"> <h3 class="portseparator">State Parks &amp; Recreation</h3> </a> <div id="accordion-2" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-wildlifereserve.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-wildlifereserve.JPG" style="width:100%;height:auto;" alt="St. Augustine Wild Reserve"> </a> </div> <div class="col-md-6"> <h3><a href="http://www.staugustinewildreserve.org">St. Augustine Wild Reserve</a></h3> <p>Guests will be given a guided tour of the 7-acre animal compound by an experienced wildlife professional. An introduction to each species, basic biology, and how the animal arrived at the s <h5><a href="http://www.staugustinewildreserve.org"> Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-anastasiastatepark.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-anastasiastatepark.JPG" style="width:100%;height:auto;" alt="Anastasia State Park"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="https://www.floridastateparks.org/park/anastasia">Anastasia State Park</a></h3> <p>Anastasia State Park includes 1,600 acres of rich ecosystems and abundant wildlife. Explore up to foulaces.</p> <h5><a target="_blank" href="https://www.floridastateparks.org/park/anastasia">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-alligatorfarm.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-alligatorfarm.JPG" style="width:100%;height:auto;" alt="Coming Soon"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.alligatorfarm.com/">St. Augustine Alligator Farm Zoological Park</a></h3> <p>The St. Augustt also a variety of other reptiles, mammals, and birds, as well as exhibits, animal performances and educational demonstrations. </p> <h5><a target="_blank" href="http://www.alligatorfarm.com">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-beach.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-beach.JPG" style="width:100%;height:auto;" alt="St. Augustine Beach"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.staugustinelighthouse.com/">St. Augustine Beach</a></h3> <p>St. Augustine&#146;s beaches stretch from Vilano Beach north of the city to Crescent Beach in the sorgeous coastline with many public areas for beach recreation and relaxation.</p> <h5><a target="_blank" href="http://www.oldcity.com/beaches">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-3"><h3 class="portseparator">Local Golf Courses</h3></a> <div id="accordion-3" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stjohns.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stjohns.JPG" style="width:100%;height:auto;" alt="St. Johns Golf &amp; Country Club"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.stjohnsgolf.com">St. Johns Golf &amp; Country Club</a></h3> <p>St. Johns Golf &amp; Country Club is an extraordinary place located between St. Augustine and Jacksonville. The 18-hole Clyde Johnston-designed course is the community&#146;s centerpiece with just the right amount of challenge for novice and avid golfers alike. A great place to hone your skills, St. Johns is known for its consistent quality of service and conditions.</p> <h5><a target="_blank" href="http:/www.stjohnsgolf.com">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-southampton.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-southampton.JPG" style="width:100%;height:auto;" alt="South Hampton Golf Club"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.golfsouthhampton.com/">South Hampton Golf Club</a></h3> <p>The course has 16 lakes and over 60 bunkers, but the layout is fair. The back nine is a bit more adventurous so do your scoring on the front nine. There is a great variety of holes and you will not be bored playing here. The course is now family owned and all the staff are very friendly and helpful. You can't go wrong playing here as the rates are very reasonable and the course challenging and interesting.</p> <h5><a target="_blank" href="http:/www.golfsouthhampton.com/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-royalgolf.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-royalgolf.JPG" style="width:100%;height:auto;" alt="Royal St. Augustine Golf &amp; Country Club"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.royalstaugustinegolf.com/">Royal St. Augustine Golf Club</a></h3> <p>If you are looking for a course close to downtown, Royal St Augustine is it. The conditions are generally good here and the staff is friendly. This is a very tight golf course and if you are even slightly off the fairways, kiss that golf ball goodbye. Two fairways line the road, if your tee shot missed the narrow fairway, your next shot is from the passing lane of Route 16. However if you want to tee it up near town on a well maintained course, this is a good choice. Just bring plenty of balls, and a straight tee shot.</p> <h5><a target="_blank" href="http://www.royalstaugustinegolf.com/">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-4"><h4 class="portseparator">Food &amp; Entertainment</h4></a> <div id="accordion-4" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-staugustinedistillery.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-staugustinedistillery.JPG" style="width:100%;height:auto;" alt="St. Augustine Distillery Company"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.staugustinedistillery.com">St. Augustine Distillery Company</a></h3> <p>Take a free tour of the distillery and watch as they mix, mash, cook and distill small batch <h5><a target="_blank" href="http://www.staugustinedistillery.com"> Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-sansabastienwine.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-sansabastienwine.JPG" style="width:100%;height:auto;" alt="San Sebastian Winery"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.sansebastianwinery.com/">San Sebastian Winery</a></h3> <p>Today, San Sebastian ranks as one of Florida&#146;s premium wineries, and remains a Du Bois are produced and marketed along with blended and sparkling wines from natiebastian brand.</p> <h5><a target="_blank" href="http://www.sansebastianwinery.com/"> Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> <a class="anchorlink" id="events" a name="events"></a> <h3 class="title">Area Events</h3> <p style="color:#0071bc;font-size:1.65em;">St. Augustine is a venue for all types of events large and small, historical and modern, educational and entertaining. Featured events in St. Augustin the Sea concerts.</p> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-5"><h4 class="portseparator">Area Events</h4></a> <div id="accordion-5" class="accordion-section-content"> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-farmersmarket.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-farmersmarket.JPG" style="width:100%;height:auto;" alt="Third Saturdays Nocatee Farmers Market"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.nocatee.com/">Third Saturdays Nocatee Farmers&#146; Market</a></h3> <h4>February 20, 2016 to December 17, 2016</h4> <p>Nocatee Farmer&#146;s Market takes place from 10:00AM - 2:00PM every third Saturday. This free family-friendly event has over 80 local vendors selling everything from produce, crafts, jewelry, herbs, unique foods and more. Free face painting will be available for the little ones, along with a bounce house.</p> <h5><a target="_blank" href="http://www.nocatee.com/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-cathedralfestival.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-cathedralfestival.JPG" style="width:100%;height:auto;" alt="Cathedral Festival"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://augustine.com/event/cathedral-festival">Cathedral Festival</a></h3> <h4>Friday – Sunday, February 26 - 28, 2016</h4> <p>The 31st Annual Cathedral Festival at the Mission of Nombre de Dios grounds offers fun for the whole family. Located near the giant cross in St. Augustine, visitors are welcome to enjoy the fun rides, games, raffles, bingo, food and art vendors, fireworks and more. Families will enjoy exciting midway rides that are thrilling for all ages including a Ferris wheel, slides and much more.</p> <h5><a target="_blank" href="http://augustine.com/event/cathedral-festival">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lionsseafoodfestival.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lionsseafoodfestival.JPG" style="width:100%;height:auto;" alt="St. Augustine's Lion Seafood Festival"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://augustine.com/event/st-augustine-lions-seafood-festival">St. Augustine&#146;s Lion Seafood Festival</a></h3> <h4>March 4 - 6, 2016</h4> <p>The 35th Annual St. Augustine Lions Seafood Festival features delicious seafood, arts and crafts, live music, family activities, and much more. The festival takes place at Francis Field, Friday – Sunday, March 4 – 6, 2016.</p> <h5><a target="_blank" href="http://augustine.com/event/st-augustine-lions-seafood-festival">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stpattys.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stpattys.JPG" style="width:100%;height:auto;" alt="St. Patrick's Day Parade"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.celticstaugustine.com/st-patricks-day-parade/">St. Patrick's Day Parade</a></h3> <h4>March 12, 2016</h4> <p>St. Augustine's St. Patrick Day Parade is the ONLY St. Patrick's Day Parade in Northeast Florida. The Parade is an annual celebration of St. Augustine's Celtic heritage and the Emerald Isle's most revered saint. With over 800 participants and thousands of spectators, lads and lasses converge upon the Ancient City each year doning their tartans and green attire.</p> <h5><a target="_blank" href="http://www.celticstaugustine.com/st-patricks-day-parade/">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-bbqfestival.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-bbqfestival.JPG" style="width:100%;height:auto;" alt="Rhythm & Ribs Festival"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://augustine.com/event/rhythm-ribs-festival">Rhythm &amp; Ribs Festival</a></h3> <h4>Friday - Sunday, April 1 - 3, 2016</h4> <p>The 21st Annual Rhythm &amp; Ribs Festival celebrates delicious barbecue, music and good times with live entertainment and local chefs competing for the best BBQ. This festival includes great live music throughout the weekend, people's BBQ choice awards, a kids zone, mechanical bull, an array of vendors, and much more.</p> <h5><a target="_blank" href="http://augustine.com/event/rhythm-ribs-festival">Click here for more information!</a></h5> </div> </div> <div class="col-md-12 portfolio"> <div class="col-md-6" style="text-align:center;"> <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-romanza.JPG" data-featherlight="image"> <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-romanza.JPG" style="width:100%;height:auto;" alt="Coming Soon"> </a> </div> <div class="col-md-6"> <h3><a target="_blank" href="http://www.see-staugustine.com/events/romanza-festivale-in-st-augustine-2016-05-08/#.VraiH9A_u9U">Romanza Festivale in St. Augustine</a></h3> <h4>May 6 - 15, 2016</h4> <p>Come to Saint Augustine from May 6 through the 15, 2016 for a celebration of art and music i <h5><a target="_blank" href="http://www.see-staugustine.com/events/romanza-festivale-in-st-augustine-2016-05-08/#.VraiH9A_u9U">Click here for more information!</a></h5> </div> </div> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion-->