Try This Dropdown/Scrolling Content
Content 1
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Content 2
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Content 3
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae. Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum. Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.
This tutorial assumes you have a basic understanding of Elementor’s containers and widgets, as well as access to Elementor’s Advanced > Custom CSS area.
This is a great way to replace the Tabs Widget on mobile. Just go to Advanced > Responsive and hide Tabs on mobile and do the same for the HTML Widget but hide HTML on tablet and desktop.
Step 1 – Add Widget
- First add Elementor’s HTML Widget to the container.
Step 2 – Add HTML
- Copy and paste this code into the Content area of the widget and replace “YOUR-IMAGE-HERE” with the link for your image and enter your own alt=”” info (example: alt=”skyscraper”).
<body>
<select id=”target”>
<option value=””>Select…</option>
<option value=”content_1″>Content 1</option>
<option value=”content_2″>Content 2</option>
<option value=”content_3″>Content 3</option>
</select>
<div id=”content_1″ class=”inv”>
<h3 style=”color: #83597f;”>Content 1</h3>
<p><img src=”YOUR-IMAGE-HERE” alt=”” width=”320″ height=”400″ /></p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p></div>
<div id=”content_2″ class=”inv”>
<h3 style=”color: #83597f;”>Content 2</h3>
<p><img src=”YOUR-IMAGE-HERE” alt=”” width=”320″ height=”400″ /></p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p></div>
<div id=”content_3″ class=”inv”>
<h3 style=”color: #83597f;”><strong>Content 3</strong></h3>
<p><img src=”YOUR-IMAGE-HERE” alt=”” width=”320″ height=”400″ /></p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p>
<p>Lorem ipsum dolor sit amet. Eos error animi aut illum rerum in nemo porro et temporibus tenetur ea quidem sunt est eligendi dolor quo modi ipsa? Vel distinctio galisum et molestiae incidunt est rerum consequatur. Et alias ipsum ut blanditiis sunt vel velit saepe sed minus atque 33 voluptatem nostrum sed nihil molestiae.
Et velit facilis aut eius facere sed minima eligendi? Aut atque similique sed consequatur esse ut minus reiciendis rem officia suscipit sit ducimus animi et galisum dolorem aut dolor earum.
Ut fuga sapiente sed accusantium quia et culpa debitis eos quis beatae. Et magnam magni aut fugiat voluptate est nisi atque cum esse dicta non nemo sequi. Non omnis magnam sit earum quibusdam rem perspiciatis voluptas ut nostrum voluptatum qui doloribus minus et perspiciatis rerum eum velit nisi. Id quis placeat ut quidem omnis ut laboriosam necessitatibus et atque omnis.</p></div>
<script>
document
.getElementById(‘target’)
.addEventListener(‘change’, function () {
‘use strict’;
var vis = document.querySelector(‘.vis’),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = ‘inv’;
}
if (target !== null ) {
target.className = ‘vis’;
}
});
</script>
Step 3 – Add CSS
- Now add this styling under the Advanced > Custom CSS area of the HTML widget.
selector .inv {
display: none;
}
selector {
background-color: #f5f5f5;
padding: 5px;
}
selector #content_1, #content_2, #content_3, #content_4, #content_5, #content_6, #content_7, #content_8, #content_9, #content_10, #content_11, #content_12, #content_13, #content_14, #content_15, #content_16, #content_17, #content_18 {
margin-top:15px;
padding:5px;
max-height: 500px;
overflow: scroll;
scrollbar-color: #9da27d;
scrollbar-width: thin;
}
selector img {
padding: 15px;
float:left;
}
And voilá! What you get is a Drop Down Menu with content you can customize, yourself.
Change “max-height” to accommodate the height you need, as well as other CSS code to manipulate the look and feel of your container!
Thank you for following this tutorial. For help with anything you can’t find an answer to, fill out the Contact Page here and let me know what you’d like to see.
