How to automatically open JQuery Accordion panels when the page loads

Question

How to automatically open JQuery Accordion panels when the page loads

My Accordion loads with the 1st panel open upon page load, but I am looking for a way to have the entire Accordion closed by default. Any help or suggestions on how to achieve this would be highly appreciated. Thank you for your assistance.

FIDDLE http://jsfiddle.net/CzE3q/989/

#accordion {
width:100%;
margin:10px auto;
border:1px solid black;
-webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
}
#accordion h2 {
clear: both;
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
border:1px solid white;
background-color:#ff6600;
font:bold 22px Petua One;
color:#ffffff;
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}

#accordion .content1 {
background-color:#ffffff;
padding:10px 15px;
color:black;
height:150px;
width:25%;
float:left;

}
#accordion h2.active {
background-color:#000000;

}

.content-wrapper{
display: inline-block;
}

.content-wrapper a{
display: block;
}



<div id="accordion">
 <h2>League Scores</h2>

<div class="content">
    <div class="content1"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt=" photo PAHL210210_zps694744b9.png"/></a>

    <br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a>

    <br><a href="http://www.pahockey.com">Squirt</div>
<div class="content1"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/HPHL_zps31e66fcd.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/HPHL_zps31e66fcd.png" width="90" height="90" border="0" alt=" photo HPHL_zps31e66fcd.png"/></a>
</div>
        </div>
 <h2>League Standings</h2>
 <div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt="Pittsburgh Amateur Hockey League - Pittsburgh, PA" title="Pittsburgh Amateur Hockey League - Pittsburgh, PA"/></a>

    <br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a></div>
<div class="content"></div>
 <h2>Tournament Scores</h2>

<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100"  border="0"  alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><br><a href="http://www.pahockey.com">Minnesota Gone Wild"</a></div>
 <h2>Tournament Standings</h2>

<div class="content">
    <div class="content-wrapper">
    <a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100" border="0" alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><a href="http://www.pahockey.com">Minnesota Gone Wild</a>
    </div>
   <div class="content-wrapper">
    <a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a>Niagara Sports Tournaments</a>

javascript jquery html css

Answer 1

Answer №1

Let's simplify this code:

$('#accordion h2:first').addClass('active').next().slideDown('slow');

This code snippet shows how to make the first content section visible.

Check out the demo here: http://jsfiddle.net/CzE3q/995/

Instead of using $('#accordion .content').hide();, it is recommended to use CSS for initially hiding the content:

#accordion .content { display: none; }

For optimization purposes, consider caching the $('#accordion h2') selector like this:

var $h2 = $('#accordion h2').click(function () {
    if ($(this).next().is(':hidden')) {
        $h2.removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
    }
});

View the optimized version in this demo: http://jsfiddle.net/CzE3q/999/

Answer 2

Let's simplify this code:

$('#accordion h2:first').addClass('active').next().slideDown('slow');

This code snippet shows how to make the first content section visible.

Check out the demo here: http://jsfiddle.net/CzE3q/995/

Instead of using $('#accordion .content').hide();, it is recommended to use CSS for initially hiding the content:

#accordion .content { display: none; }

For optimization purposes, consider caching the $('#accordion h2') selector like this:

var $h2 = $('#accordion h2').click(function () {
    if ($(this).next().is(':hidden')) {
        $h2.removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
    }
});

View the optimized version in this demo: http://jsfiddle.net/CzE3q/999/

Answer 3

Answer №2

Your fiddle is set to start opened because of the following line:

$(function () {
    $('#accordion .content').hide();
    //You can solve this issue by commenting out this line:
    //$('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function () {
        if ($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Take a look at the updated fiddle here: http://jsfiddle.net/CzE3q/998/

Answer 4

Your fiddle is set to start opened because of the following line:

$(function () {
    $('#accordion .content').hide();
    //You can solve this issue by commenting out this line:
    //$('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function () {
        if ($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Take a look at the updated fiddle here: http://jsfiddle.net/CzE3q/998/

Answer 5

Answer №3

Take a look at this JS Fiddle

Does this meet your requirements?

   $(function () {

    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function () {
        if ($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
    $('#accordion .content').hide();
});

I moved the "hide" function to the end of the code snippet for better clarity.

$('#accordion .content').hide();

Answer 6

Take a look at this JS Fiddle

Does this meet your requirements?

   $(function () {

    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function () {
        if ($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
    $('#accordion .content').hide();
});

I moved the "hide" function to the end of the code snippet for better clarity.

$('#accordion .content').hide();

How to automatically open JQuery Accordion panels when the page loads

Answer №1

Check out the demo here: http://jsfiddle.net/CzE3q/995/

View the optimized version in this demo: http://jsfiddle.net/CzE3q/999/

Answer №2

Answer №3

Similar questions

Integrate PHP include files into a website without allowing direct access, then dynamically load them using jQuery AJAX

Make sure that the iframe loads the next page with enough force to break out

Can you easily choose specific rows within a group in jqGrid?

The content within the mat-card-content paragraph exceeds the boundaries of the mat-card container,

Run Javascript code if a specific CSS class is present on an element

The React application is showing an empty page without any visible errors during the compilation process

Troubleshooting problem with JSON object and HTML paragraph formatting

Having trouble accessing data from the local storage?

Retrieve RadioButtonList Value using jQuery Function

Display a webpage in thumbnail form when hovering the mouse over it

How can I pass standard HTML as a component in React?

NodeJS - The function app.listen is not defined in this context

Unable to remove the vertical dropdown menu padding issue in Firefox

Can someone please explain the purpose of row-sm and row-cols-sm-n (where n<12)? I've come across the col-sm-n (where n<12) but I'm unsure about how row-sm is used

Elegant Modal Form Submission Using jQuery

Alternatives to using $.getJSON()

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

jquery-ui allowing to resize child divisions as well

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

Tips for customizing the appearance of a mat-select chosen item?