Editor de HTML @nitoku_es.público

El componente para editar HTML se ha creado en esta página especial donde encontrarás todos los detalles acerca de este bloque: https://www.nitoku.com/@nitoku.public/code

Se puede pulsar el botón de editar que hay encima de la imagen para entrar en el editor de HTML.

%###### HTML ######%
<br><br>
<div class='faq-wrapper'>
    <div class='faq'>
        <div class='faq-title'>
            <b>Headline 1</b> 
            <div class='chevron'><i class="fa fa-chevron-down"></i></div>
        </div><div class='faq-content slide-in'>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
           labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
           nisi ut aliquip ex ea commodo consequat. 
        </div>
    </div>
    <div class='faq'>
        <div class='faq-title'>
            <b>Headline 2</b> 
            <div class='chevron'><i class="fa fa-chevron-down"></i></div>
        </div><div class='faq-content slide-in'>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
           labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
           nisi ut aliquip ex ea commodo consequat. 
        </div>
    </div>
    <div class='faq'>
        <div class='faq-title'>
            <b>Headline 3</b>
            <div class='chevron'><i class="fa fa-chevron-down"></i></div>
        </div><div class='faq-content slide-in'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
           labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
           nisi ut aliquip ex ea commodo consequat. 
        </div>
    </div>
</div>
%###### CSS #######%
body {
    background-color: #ffffff;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.faq-wrapper{
    margin-top: 0;
    margin-bottom: 0;
    padding: 3px 20px 8px;
}
.faq{    
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
    overflow:hidden;
    display: flex;
    flex-direction: column;
}
.chevron{
    display: block;
    margin-top: 0;
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0;
    text-align: right;
    cursor : pointer;
}
.faq-title{
    background-color: #f6f8fa;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 15px 90px 8px 15px;
    min-height: 48px;
    position: relative;
}
.faq-content{
    background-color: #f6f8fa;
    color: inherit;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}
.faq-title a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4 !important;
}

.slide-in {
    top: 0%;
    max-height: 0px;
    transition: all 0.45s cubic-bezier(0.47, 0, 0.38, 0.85);
    overflow: hidden;
    padding: 0px 15px 0px 15px;
}

.slide-out {
    top: 100%;
    max-height: 500px;
    transition: all 0.45s cubic-bezier(0.47, 0, 0.38, 0.85);
    padding: 15px 15px 20px 15px;
}
%### JAVASCRIPT ###%
var chevronItems = document.querySelectorAll('.chevron');

chevronItems.forEach(function(chevronEl) {
    chevronEl.addEventListener('click', function (e) {
        
        var buttonEl = this.firstChild;
        buttonEl.classList.toggle('fa-chevron-up');
        buttonEl.classList.toggle('fa-chevron-down');
        
        var contentEl = this.parentNode.nextSibling;
        contentEl.classList.toggle('slide-in');
        contentEl.classList.toggle('slide-out');

});
});
%#### SETTINGS ####%
{"readOnly":false}

Info and Warnings🔗

Nitoku is serviced from cloud infrastructure in USA 🇺🇸, provided from Spain 🇪🇸, developed with ❤️ in Japan 🇯🇵 Tokyo 🗼. Copyright © 2019 Nitoku Europe S.L. Icons by Icon8 🔗

Info and Warnings🔗

Nitoku is serviced from cloud infrastructure in USA 🇺🇸, provided from Spain 🇪🇸, developed with ❤️ in Japan 🇯🇵 Tokyo 🗼. Copyright © 2019 Nitoku Europe S.L. Icons by Icon8🔗

Nitoku is serviced from cloud infrastructure in USA 🇺🇸, provided from Spain 🇪🇸, developed with ❤️ in Japan 🇯🇵 Tokyo 🗼. Copyright © 2019 Nitoku Europe S.L. Icons by Icon8 🔗