1

Estou criando um Menu Accordion, baseando em um exemplo que achei na internet, no entanto, estou lutando pra tentar fazer com que fique uma opção em aberto por padrão, igualmente nesse exemplo aqui.

Alguém poderia me ajudar?

//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>

2
  • Tá e cade o seu código? Qual código é o que vc está usando? Vc citou 3 exemplos. Mas sem saber exatamente o que vc tem ai fica difícil te responder com precisão
    – hugocsl
    Commented 3/12/2018 às 22:03
  • 1
    Editei com o código que eu estou usando agora Commented 3/12/2018 às 22:54

1 Resposta 1

3

Vc nem precis mexer no JS para arrumar isso. Basta já deixar uma das opções do seu menu já selecionada com a classe .active setada. Tipo assim, eu já deixei o primeir <a href="#" class="togglefaq active"> com a classe .active definida.

Em seguida na <div class="faqanswer"> como o display é definido pelo slideToggle basta que vc também já o deixe como display:block definido, no caso na style="display:block"

Veja como ficou o resultado, repare que o primeiro item já aparece aberto, e se vc clicar nele ele vai se fechar.

//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>

2
  • Funcionou, eu lembro de ter feito isso, só que quando clicava nos outros elementos ele continuava aberto Commented 4/12/2018 às 1:45
  • @SérgioMachado talvez tenha faltado algum detalhe quando vc fez, Pq o slidetoggle muda o display do elemento direto no style da tag. Mas que bom que resolveu ai. Boa sorte no projeto qq coisa estamos ai
    – hugocsl
    Commented 4/12/2018 às 9:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .