Accordion menu with option open by default

Question

I’m creating a Menu Accordion, based on a example that I found on the internet, however, I’m struggling to try to make it an open option by default, equally in this example here.

Could someone help me?

//faq toggle stuff 
$('.togglefaq').click(function(e) {
e.preventDefault();
var notthis = $('.active').not(this);
notthis.find('.icon-minus').addClass('icon-plus').removeClass('icon-minus');
notthis.toggleClass('active').next('.faqanswer').slideToggle(300);
 $(this).toggleClass('active').next().slideToggle("fast");
$(this).children('i').toggleClass('icon-plus icon-minus');
});

/* FAQ COLLAPSE/EXPAND STYLES */
* {
  box-sizing: border-box;
}
.faqanswer {
	display: none;
	width: 590px;
	background: #e5e5e5;
	padding: 12px 20px 0 30px;	
}

.faqanswer p {
	font-size: 13px;
	line-height: 17px;	
}


a.active {
	font-weight: bold;
}

.togglefaq {
	text-decoration: none;
	color: #333;
	font-size: 13px;
	padding: 10px 30px;
	line-height: 20px;
	display: block;
	border: 1px solid #d0d0d0;
	width: 590px;
	margin-bottom: -1px;
}
.icon-plus {
	color: #5ec4cd;
	margin-right: 20px;
	font-size: 20px;
	float:left;
}

.icon-minus {
	color: #5ec4cd;
	margin-right: 20px;
	font-size: 20px;
	float:left;
}
p {
  margin: 0;
  padding-bottom: 20px;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a href="#" class="togglefaq"><i class="icon-plus"></i> How do you tell an introverted computer scientist from an extroverted computer scientist?</a>
          <div class="faqanswer">
            <p>An extroverted computer scientist looks at <em>your</em> shoes when he talks to you.
</p>
   </div>
   
       <a href="#" class="togglefaq"><i class="icon-plus"></i> How many programmers does it take to change a light bulb?</a>
          <div class="faqanswer">
             <p>None, that's a hardware problem.
</p>
   </div>

        <a href="#" class="togglefaq"><i class="icon-plus"></i> What's the object-oriented way to become wealthy?</a>
          <div class="faqanswer">
             <p>Inheritance.
</p>
   </div>    
   
           <a href="#" class="togglefaq"><i class="icon-plus"></i> Why do programmers like UNIX?</a>
          <div class="faqanswer">
             <p>unzip, strip, touch, finger, grep, mount, fsck, more, yes, fsck, fsck, fsck, umount, sleep
</p>
   </div>

Answer 1

You don’t even need to touch the JS to fix it. Just leave one of the options in your menu already selected with the class .active setada. Like this, I’ve left the first <a href="#" class="togglefaq active"> with class .active definite.

Next on <div class="faqanswer"> like the display is defined by slideToggle Enough that you also already leave it as display:block defined in the case of style="display:block"

See how the result turned out, notice that the first item already appears open, and if you click on it it will close.

//faq toggle stuff 
$('.togglefaq').click(function (e) {
    e.preventDefault();
    var notthis = $('.active').not(this);
    notthis.find('.icon-minus').addClass('icon-plus').removeClass('icon-minus');
    notthis.toggleClass('active').next('.faqanswer').slideToggle(300);
    $(this).toggleClass('active').next().slideToggle("fast");
    $(this).children('i').toggleClass('icon-plus icon-minus');
});

/* FAQ COLLAPSE/EXPAND STYLES */
* {
    box-sizing: border-box;
}

.faqanswer {
    display: none;
    width: 590px;
    background: #e5e5e5;
    padding: 12px 20px 0 30px;
}

.faqanswer p {
    font-size: 13px;
    line-height: 17px;
}


a.active {
    font-weight: bold;
}

.togglefaq {
    text-decoration: none;
    color: #333;
    font-size: 13px;
    padding: 10px 30px;
    line-height: 20px;
    display: block;
    border: 1px solid #d0d0d0;
    width: 590px;
    margin-bottom: -1px;
}

.icon-plus {
    color: #5ec4cd;
    margin-right: 20px;
    font-size: 20px;
    float: left;
}

.icon-minus {
    color: #5ec4cd;
    margin-right: 20px;
    font-size: 20px;
    float: left;
}

p {
    margin: 0;
    padding-bottom: 20px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<a href="#" class="togglefaq active"><i class="icon-plus"></i> How do you tell an introverted computer scientist from an
    extroverted computer scientist?</a>
<div class="faqanswer" style="display:block">
    <p>An extroverted computer scientist looks at <em>your</em> shoes when he talks to you.
    </p>
</div>

<a href="#" class="togglefaq"><i class="icon-plus"></i> How many programmers does it take to change a light bulb?</a>
<div class="faqanswer">
    <p>None, that's a hardware problem.
    </p>
</div>

<a href="#" class="togglefaq"><i class="icon-plus"></i> What's the object-oriented way to become wealthy?</a>
<div class="faqanswer">
    <p>Inheritance.
    </p>
</div>

<a href="#" class="togglefaq "><i class="icon-plus"></i> Why do programmers like UNIX?</a>
<div class="faqanswer" >
    <p>unzip, strip, touch, finger, grep, mount, fsck, more, yes, fsck, fsck, fsck, umount, sleep
    </p>
</div>