JADE
div.lh-dropdown
div.lh-dropdown__section
div.lh-dropdown__title.lh-dropdown__title--alt 1.¿Qué es Cuenta Simple?
span.lh-dropdown__arrow
div.lh-dropdown__content
p Mixtape cardigan vinyl, listicle mumblecore neutra occupy mlkshk master cleanse gastropub cold-pressed chicharrones. Tote bag echo park slow-carb, quinoa before they sold out tumblr irony. IPhone man bun single-origin coffee, kinfolk meggings neutra paleo tousled. Taxidermy tofu ugh godard, fingerstache tumblr helvetica distillery vice etsy hoodie quinoa chartreuse normcore. Tumblr gentrify before they sold out bicycle rights tofu. Gochujang direct trade synth asymmetrical mumblecore. Lumbersexual chartreuse trust fund marfa, church-key brunch knausgaard artisan selvage.
div.lh-dropdown__section
div.lh-dropdown__title Cuenta Millonaria
span.lh-dropdown__arrow
div.lh-dropdown__content
p Tacos raw denim keytar VHS, biodiesel pinterest kombucha deep v kickstarter gentrify iPhone
div.lh-dropdown__section
div.lh-dropdown__title.lh-dropdown__title--alt 1.¿Qué es Cuenta Simple?
span.lh-dropdown__arrow
div.lh-dropdown__content
p Narwhal tacos poutine tumblr viral pitchfork. Etsy kickstarter yuccie, pug butcher stumptown craft beer pitchfork distillery retro sriracha post-ironic. Waistcoat tilde street art jean shorts authentic. Sustainable ugh intelligentsia man braid paleo asymmetrical cold-pressed, VHS umami cronut. Vegan tofu yr, ennui wolf ugh humblebrag polaroid marfa messenger bag. Viral asymmetrical knausgaard, church-key four dollar toast master cleanse blue bottle.
div.lh-dropdown__section
div.lh-dropdown__title.lh-dropdown__title--alt 2.¿Qué es la TREA?
span.lh-dropdown__arrow
div.lh-dropdown__content
p Tacos waistcoat sustainable neutra YOLO. Yuccie VHS PBR&B, salvia affogato leggings gentrify tilde brooklyn ennui listicle cray waistcoat sartorial asymmetrical. Shabby chic irony etsy, pour-over taxidermy roof party mixtape authentic keffiyeh blog. Yr fixie salvia poutine.
SCSS
.lh-dropdown{
margin: 10px auto;
width: 50%;
> .lh-dropdown__section{
border-bottom: 1px solid #ccc;
&:first-child{
border-top: 1px solid #ccc;
}
}
&__section{
position: relative;
}
&__title{
cursor: pointer;
height: 50px;
line-height: 50px;
position: relative;
z-index: 2;
font-weight: bold;
&--alt{
color: #55aced;
& + .lh-dropdown__arrow{
height: 6px;
width: 6px;
border-color: #55aced;
}
}
}
&__arrow{
/*Positioning the arrow*/
content: "";
position: absolute;
z-index: 2;
top: 19px;
right: 19px;
background-color: transparent;
/* Arms */
width: 9px;
border-bottom: 2px solid #5da952;
height: 9px;
border-right: 2px solid #5da952;
/* Rotating */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
&--active{
@extend .lh-dropdown__arrow;
border-bottom: 2px solid #5da952;
border-right: 2px solid #5da952;
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
}
&__content{
display: none;
}
}
JAVASCRIPT
var DROPDOWN_CLASS = ".lh-dropdown";
var SECTION_SUFFIX = "__section";
var TITLE_SUFFIX = "__title";
var TITLE_ALT_SUFFIX = "__title--alt";
var ARROW_SUFFIX = "__arrow";
var ARROW_ACTIVE_SUFFIX = "__arrow--active";
var CONTENT_SUFFIX = "__content";
var $dropdown;
var $sectionVar;
var $sections;
var $titleVar;
var $titles;
var $arrowVar;
var $arrowActive;
var $currentSection;
var $currentContent;
var $currentArrow;
var $currentSiblings;
var cache = function(){
$arrowActiveClass = 'lh-dropdown__arrow--active';
$dropdown = $(DROPDOWN_CLASS);
$sectionVar = $(DROPDOWN_CLASS + SECTION_SUFFIX);
$titleVar = $(DROPDOWN_CLASS + TITLE_SUFFIX);
$contentVar = $(DROPDOWN_CLASS + CONTENT_SUFFIX);
$arrowVar = $(DROPDOWN_CLASS + ARROW_SUFFIX);
$sections = $dropdown.find($sectionVar);
$titles = $sectionVar.find($titleVar);
};
var bind = function(){
$titles.on('click',collapseDropdown);
};
var collapseDropdown = function(){
$currentSection = $(this).parent($sectionVar);
$currentContent = $currentSection.find($contentVar).eq(0);
$currentArrow = $currentSection.find($arrowVar).eq(0);
$currentSiblings = $currentSection.siblings();
$siblingsContent = $currentSiblings.find($contentVar).eq(0);
$siblingsArrow = $currentSiblings.find($arrowVar).eq(0);
$siblingsContent.slideUp();
$siblingsArrow.removeClass($arrowActiveClass);
$currentContent.slideToggle();
$currentArrow.toggleClass($arrowActiveClass);
};
var main = function(){
cache();
bind();
};
document.addEventListener("DOMContentLoaded", main);
