Concert menu with option open by default

Question

Concert menu with option open by default

Navigation

#1 by (3 votes)

1

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

Could anyone 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><ahref="#" 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>

javascript jquery

asked by anonymous 03.12.2018 / 22:46

1 answer

printf does not show expected value How do I load a controller into another?

score 3 · Accepted Answer

You do not even have to mess with JS to fix it. Just leave one of the options in your already selected menu with class .active set. Type so, I already left the first <a href="#" class="togglefaq active"> with class .active defined.

Then in <div class="faqanswer"> as display is defined by slideToggle it suffices that you also already leave it as display:block defined, in this case in style="display:block"

See how the result was, notice that the first item already appears open, and if you click 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><ahref="#" 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>