Как правильно использовать вложенные аккордеоны?

Question

Я недавно начал заниматься веб-программированием. Так что да, я новичок, и я надеюсь, что меня это не задело, возможно, тривиальная проблема. Я наткнулся на этот удивительный урок для аккордеонов, использующего CSS и jQuery, который я хотел бы использовать на своей веб-странице. Мои вопросы:

1. Как я могу показать первый аккордеон как всегда активный? (display:block; на самом деле не работает. При нажатии на страницу загрузки она закрывается и открывает этот Аккордеон 1)

2. Как правильно делать вложенные аккордеоны?

Вот код

  
  
$(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 * {
            box-sizing:border-box;
         -moz-box-sizing:border-box;
         -webkit-box-sizing:border-box;
        }
         
        .accordion {
            overflow:hidden;
            box-shadow:0px 1px 3px rgba(0,0,0,0.25);
            border-radius:3px;
         -moz-border-radius:3px;
         -webkit-border-radius:3px;
            background:#f9cf96;
         color:#9d3528;
        }
         
        /*----- Section Titles -----*/
        .accordion-section-title {
            width:100%;
            padding:15px;
            display:inline-block;
            border-bottom:1px solid #1a1a1a;
            background:#f9cf96;
            transition:all linear 0.15s;
            /* Type */
            font-size:1.200em;
            color:#9d3528;
         text-decoration:none;
        }
         
        .accordion-section-title.active, .accordion-section-title:hover {
            background:#f2a843;
            /* Type */
            text-decoration:none;
        }
         
        .accordion-section:last-child .accordion-section-title {
            border-bottom:none;
        }
         
        /*----- Section Content -----*/
        .accordion-section-content {
            padding:15px;
            display:none;
        }
    
    

<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion 1</a>
<div id="accordion-1" class="accordion-section-content" style="display:block;">
<p style="text-indent:20px;">Some text here...</p>
                         
<a class="accordion-section-title" href="#accordion-2">Nested Accordion 1.1</a>
<div id="accordion-2" class="accordion-section-content">
<p>Some text here and photo gallery.</p>
</div><!--end .accordion-section-content-nested-->
                          
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->