Toggle / přepínátko

Toggly tohoto typu lze používat k interakci s účastníky kurzů, ať už na hlavní stránce kurzu či v jednotlivých modulech.

---

<!-- Toggle 1 for Text -->

<div class="toggle-container">

    <input type="checkbox" id="toggle1" class="toggle-checkbox">

    <label for="toggle1" class="toggle-label">Toggle Text <span class="arrow">▼</span></label>

    <div class="toggle-content">

        <p>Your text here...</p>

    </div>

</div>

<!-- Toggle 2 for Image -->

<div class="toggle-container">

    <input type="checkbox" id="toggle2" class="toggle-checkbox">

    <label for="toggle2" class="toggle-label">Toggle Image <span class="arrow">▼</span></label>

    <div class="toggle-content">

        <img src="your-image.jpg" alt="Description">

    </div>

</div>

Toogly na jedné stránce musejí být oddělené čísly (viz výše), jinak dělají paseku. 

Kód se jednoduše vloží do wysiwyg (či podobného) editoru po rozkliknutí ikony </> pro vkládání html kódu. 

---

  Zároveň je pro dosažení vzhledu třeba upravit CSS (upraví admin stránky ve Správě stránek):

.toggle-container {

    margin-bottom: 10px;

}

.toggle-checkbox {

    display: none;

}

.toggle-label {

    background-color: #F7F7F7;

    color: black;

    border: 2px solid #DFDFDF;

    padding: 20px;

    width: 100%;

    text-align: left;

    display: block;

    cursor: pointer;

}

.toggle-label .arrow {

    float: right;

}

.toggle-checkbox:checked + .toggle-label .arrow {

    content: '▲';

}

.toggle-content {

    display: none;

    padding-left: 20px;

}

.toggle-checkbox:checked + .toggle-label + .toggle-content {

    display: block;

}

.toggle-content img, .toggle-content iframe {

    width: 100%;

    height: auto;

}