1

Estoy haciendo un acordeón y quisiera saber como puedo dejar abierto uno de los titulos. Por ej detectores de potencia.

$(".accordion-wrap").on("click", function(){   
		    $(this).children().eq(1).slideToggle(300);  
		    $(this).children().eq(0).toggleClass("accordion-no-bar");
		    $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
		    $(this).siblings().find(".accordion-header i").removeClass("rotate-fa");
		    $(this).find(".accordion-header").toggleClass("accordion-gold");
		    $(this).find(".fa").toggleClass("rotate-fa");

		    $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);
});
/*ACORDEON*/
#categoria .cabecera_acorderon{
  background-color: #264a92;
  padding: 15px;
  margin-top: 20px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;  
}
#categoria .cabecera_acorderon h2{
  font-size: 16px;
  color: #fff;
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
#categoria .accordion-wrap{
  border-left: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
}

#categoria .accordion-item{
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  border-bottom: 1px solid #e1e1e1;
  padding: 13px 15px 0 15px;
}

#categoria .accordion-header{
  transition: ease-in-out 100ms;
  font-family: 'Barlow Semi Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  color: #5d5d5d;
  font-weight: 500
}

#categoria .accordion-text{
  width: 100%; 
  display: none;
 }
#categoria .accordion-text .contenido ul{
  list-style: none;
  margin-bottom: 0
}
#categoria .accordion-text .contenido ul li{
  padding: 7px 0;
}
#categoria .accordion-text .contenido ul .active{
  background-color: #dadbdf;
  color: #5d5d5d
}
#categoria .accordion-text .contenido ul li:hover{
  background-color: #dadbdf
}
#categoria .accordion-text .contenido ul li a{
  color: #5d5d5d;
  padding: 15px 0;
  margin: 2px 15px;
}
#categoria .accordion-text .contenido ul li a span{
  color: #00aeef
}
#categoria .accordion-text .contenido ul li a:hover{
  text-decoration: none
}

#categoria .fa{
  transition: ease-in-out 300ms;
 }

#categoria .rotate-fa{
  transform: rotate(180deg);
 }


#categoria .accordion-header .fa{
  float: right;
  line-height: 22px;
}
#categoria .accordion-item:hover{
  background: #00abeb;
}
#categoria .accordion-gold{
  color: #fff;
}

#categoria .accordion-no-bar{
  border-bottom: 0;
  background: #00abeb;
  padding: 13px 15px 5px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="col-lg-12" id="categoria">
				<div class="col-lg-3">
					<div class="cabecera_acorderon">
						<h2>INSTRUMENTAL DE MEDICIÓN LASER</h2>
					</div>
		            <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header">Monitores<i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>


		           <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header"> Detectores de energia <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>


		            <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header"> DETECTORES DE POTENCIA <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li class="active"><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>
		            <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header"> SOLUCIONES DE ALTA POTENCIA <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>
		            <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header"> DETECTORES DE FOTOS <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>
		            <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header"> DETECTORES THz <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>
		            <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header"> PRODUCTOS ESPECIALES <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>	
		            <div class="accordion-wrap">
		              <div class="accordion-item">
		                <p class="accordion-header"> DIAGNÓSTICO DE LUZ <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
		              </div>
		              <div class="accordion-text">
		                <div class="contenido">
		                	<ul>
		                		<li><a href="" title=""><i class="fas fa-angle-right"></i> XLP12 <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP10-H <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP12-H <span>(9)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-H <span>(33)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP25-H <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-H <span>(26)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP17-H-W <span>(6)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-W <span>(28)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP50-W <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP19-VR <span>(8)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UP55-VR <span>(24)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> PRONTO-250 <span>(2)</span></a></li>
								<li><a href="" title=""><i class="fas fa-angle-right"></i> UM-B <span>(2)</span></a></li>
		                	</ul>
		                </div>
		              </div>
		           </div>			           	           		           		           					
				</div>
</div>

2
  • solo uno de los títulos o todos los que se abren? Commented el 9 abr. 2018 a las 23:11
  • Solo uno necesito, osea la idea es que cuando uno ingrese a la pagina se encuentre con un titulo desplegado y mostrando los items que posee, en este caso seria detectores
    – MarianoF
    Commented el 9 abr. 2018 a las 23:13

1 respuesta 1

2

Añade esta linea despues de tu handler:

$(".accordion-wrap").eq(2).click();
2
  • Perfecto! anduvo de diez, Muchas gracias!
    – MarianoF
    Commented el 9 abr. 2018 a las 23:22
  • Si te funciono, marca la respuesta como correcta
    – alanfcm
    Commented el 9 abr. 2018 a las 23:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.