HTML Editor block

This block is used to insert html on your page, just insert a markdown block with the reference @nitoku.public/code and edit your html code on the block editor. You can see an example below of the block definition:

    ```@nitoku.public/code
    ```

After you insert the block definition, a small edit icon will become visible if you hover over the line where the block was inserted.

See an example of a working html/code block below 👇 Click on one of the boxes and then over the Edit icon.🔗

%###### HTML ######%
<br><br>
<div class='faq-wrapper'>
    <div class='faq'>
        <div class='faq-title'>
            Lorem ipsum dolor sit test t, consectetur adipiscing elit.
            <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. 
            Donec nec laoreet dui, eu auctor metus. Proin id elit nibh. 
            Phasellus tincidunt erat velit, vitae rhoncus purus viverra vel.
             Curabitur quis hendrerit nulla. Phasellus tortor massa, lacinia a massa vitae, 
             feugiat venenatis ante.
        </div>
    </div>
    <div class='faq'>
        <div class='faq-title'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elitt.
            <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.
             Donec nec laoreet dui, eu auctor metus. Proin id elit nibh.
              Phasellus tincidunt erat velit, vitae rhoncus purus viverra vel.
               Curabitur quis hendrerit nulla. Phasellus tortor massa, lacinia a massa vitae, 
               feugiat venenatis ante.
        </div>
    </div>
    <div class='faq'>
        <div class='faq-title'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elitt.
            <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.
             Donec nec laoreet dui, eu auctor metus. Proin id elit nibh.
              Phasellus tincidunt erat velit, vitae rhoncus purus viverra vel.
               Curabitur quis hendrerit nulla. Phasellus tortor massa, 
               lacinia a massa vitae, feugiat venenatis ante.
        </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}

HTML Editor block

See an example of a working html/code block below 👇 Click on one of the boxes and then over the Edit icon.🔗

Info and Warnings🔗