jQuery Accordian Script Default Open

[JeffGSR]

Hi,
I have the following jQuery script that expands and contacts. I want the first div to be expanded by default. How would I go about doing that?

<div class="accordion-container">
	<a href="#" class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
	<div class="accordion-content">
		<img src="images/italy-thumb_rome.jpg" />
		<p>...</p>
	</div>
	<!--/.accordion-content-->
</div>
<!--/.accordion-container-->
<div class="accordion-container">
	<a href="#" class="accordion-toggle">Florence <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
	<div class="accordion-content">
		<img src="images/italy-thumb_florence.jpg" />
		<p>...</p>
	</div>
	<!--/.accordion-content-->
</div>
<!--/.accordion-container-->
<div class="accordion-container">
	<a href="#" class="accordion-toggle">Venice <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
	<div class="accordion-content">
		<img src="images/italy-thumb_venice.jpg" />
		<p>...</p>
	</div>
	<!--/.accordion-content-->
</div>
<!--/.accordion-container-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
    	event.preventDefault();
    	// create accordion variables
    	var accordion = $(this);
    	var accordionContent = accordion.next('.accordion-content');
    	var accordionToggleIcon = $(this).children('.toggle-icon');
    	
    	// toggle accordion link open class
    	accordion.toggleClass("open");
    	// toggle accordion content
    	accordionContent.slideToggle(250);
    	
    	// change plus/minus icon
    	if (accordion.hasClass("open")) {
    		accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>");
    	} else {
    		accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
    	}
    });
});
</script>

[OzRamos]

A couple ways, the easiest right now would be to add this line to the end of your script:

$('.accordion-toggle').first().click()

[JeffGSR]

OzRamos, I added the line of code as you recommended, but it didn’t work. The first div did not expand on page load. Did I do something wrong. Any other suggestions?

<script type="text/javascript">
    $(document).ready(function () {
        $('.accordion-toggle').on('click', function(event){
            event.preventDefault();
            // create accordion variables
            var accordion = $(this);
            var accordionContent = accordion.next('.accordion-content');
            var accordionToggleIcon = $(this).children('.toggle-icon');
            
            // toggle accordion link open class
            accordion.toggleClass("open");
            // toggle accordion content
            accordionContent.slideToggle(250);
            
            // change plus/minus icon
            if (accordion.hasClass("open")) {
                accordionToggleIcon.html("<i class='fa fa-minus'></i>");
            } else {
                accordionToggleIcon.html("<i class='fa fa-plus'></i>");
            }
    
            $('.accordion-toggle').first().click();        
            
        });
    
    });
    </script>

[OzRamos]

Whoops I meant after the click event, not within it. Try this:

<script type="text/javascript">
    $(document).ready(function () {
        $('.accordion-toggle').on('click', function(event){
            event.preventDefault();
            // create accordion variables
            var accordion = $(this);
            var accordionContent = accordion.next('.accordion-content');
            var accordionToggleIcon = $(this).children('.toggle-icon');
            
            // toggle accordion link open class
            accordion.toggleClass("open");
            // toggle accordion content
            accordionContent.slideToggle(250);
            
            // change plus/minus icon
            if (accordion.hasClass("open")) {
                accordionToggleIcon.html("<i class='fa fa-minus'></i>");
            } else {
                accordionToggleIcon.html("<i class='fa fa-plus'></i>");
            }    
        });

        $('.accordion-toggle').first().click();        
    });
</script>

[JeffGSR]

Unfortunately, its still not working. Am I doing something wrong? Here is the actual page that this script is being applied to: http://clients.herrmann.com/obe60/practice.html

This script is only applied to the mobile version so you will need to resize your browser window to mobile size to see the accordion script in action.

[OzRamos]

I didn’t realize you had more than one set of .accordion-containers. Try changing that last line to:

$('.accordion-container.mobile .accordion-toggle').first().click();

Again that would be the easiest way. I don’t know how much control you have over the output of the content, but if you could apply a class of “default-open” to one of the accordions, example:

<a href="#" class="accordion-toggle default-open">Overview<span class="toggle-icon"><i class="fa fa-plus"></i></span></a>

Then you can replace that new line with:

$('.default-open').click();

So you end up with something like:

<script type="text/javascript">
    $(document).ready(function () {
        $('.accordion-toggle').on('click', function(event){
            event.preventDefault();
            // create accordion variables
            var accordion = $(this);
            var accordionContent = accordion.next('.accordion-content');
            var accordionToggleIcon = $(this).children('.toggle-icon');
            
            // toggle accordion link open class
            accordion.toggleClass("open");
            // toggle accordion content
            accordionContent.slideToggle(250);
            
            // change plus/minus icon
            if (accordion.hasClass("open")) {
                accordionToggleIcon.html("<i class='fa fa-minus'></i>");
            } else {
                accordionToggleIcon.html("<i class='fa fa-plus'></i>");
            }    
        });

        $('.default-open').click();
    });
</script>

I’m out of time right now so maybe someone else can help but this will only work if you load the page in “browser mode” (small width). You’ll need to add a little more logic so that it auto-opens the first accordion if you decrease the browser width.

[JeffGSR]

Thank You OzRamos! Its working!