First toggle open by default

Question

So have a block of toggles on my page and now I need to add another block of toggles on the same page but this one with the first toggle active/open by default. I've been working around the JS but no luck so far so I need your precious help to get this to work. Thanks!

Demo

Javascript

    jQuery(window).load(function(){

   $('.toggle-view li').click(function () {

        var text = $(this).children('div.toggle-content');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('<i class="icon-minus"></i>');    
        } else {
            text.slideUp('200');
            $(this).children('span').html('<i class="icon-plus"></i>');    
        }

        $(this).toggleClass('activetoggle');

    });
});

Answer 1

You can do it with something like:

$('.added_class_on_second li').eq(0).children('.toggle-content').show();

Just add another distinct class to the second, or target it with:

$('.toggle-view').eq(1).children('li').eq(0).children('.toggle-content').show();

if you don't want to change the html at all.

http://codepen.io/anon/pen/CDdlH

Answer 2

If you need the first section to be open when the page loads you could simply call click() on $('.toggle-view li').first(). However, this may have undesired side effects if you have other actions occur on click, and it will perform an animation, so consider creating a function open which does nothing but open the indicated section, and calling that on document load.