Toggle with JavaScript code

Ed Low

Hello! I have this following content that I would like to change into toggle menu. For example, I click on "Filming & Photography" and the smaller paragraph below it will show up, and click again to make it disappear

I have tried adding "id" attributes to each part of the content, and put JavaScript code embed block to after the footer of the page, but it doesn't work. May I know if there's a way to do it please? Thank you

Wassim

Hello,

Can you share a link to the page to know in what part of your website it is located? And what resolution (desktop, mobile)?

Ed Low

Hi, the URL is https://www.1010media.sg/index.html. I want to implement it for the desktop version

Thank you!

Wassim

Ok, can you show up the JS you tried to apply?
Your logic with the id should work fine.

Ed Low

Sure!

The JS code

<script>
    //Type or paste your javascript code here
    function clickToggle() {
        var service1Sub = document.getElementById("service1-sub");
        if (service1Sub.style.display === "none") {
            service1Sub.style.display = "block";
        } else {
            service1Sub.style.display = "none";
        }
    }
</script>

Currently pasted below the footer

HTML code

<h1 class="appdrag-element dynamic-sized-element service1 ui-draggable-handle resizable-elem" style="position:relative;margin-bottom:0 !important;margin-top:0 !important;padding:0 0 0 10px !important" category="Texts" margin-desktop-bottom="0" padding-desktop-top="0" padding-desktop-bottom="0" padding-desktop-left="10" padding-desktop-right="0" market-id="3700128" owner-id="4" autocomplete="off" id="service1" onclick="clickToggle()">
  <span style=" font-family:playfair=&quot;&quot; "><span style="font-size:20px">Filming &amp; Photography</span></span>
</h1>

<p style="position:relative;text-align:left !important;padding-left:30px !important;margin-top:0 !important;margin-bottom:0 !important" market-id="3700137" owner-id="4" class="dynamic-sized-element service1-sub ui-draggable-handle resizable-elem" padding-desktop-left="30" padding-desktop-top="NaN" padding-desktop-bottom="NaN" padding-desktop-right="NaN" autocomplete="off" id="service1-sub">
                  Instructional Videos
                  <br>
                   Documentary Filming
                  <br>
                   Green Screen
                  <br>
                   Underwater Filming
                </p>

For this part

Thank you Wassim!

Wassim

@Ed-Low said in Toggle with JavaScript code:

var service1Sub = document.getElementById("service1-sub");
if (service1Sub.style.display === "none") {
service1Sub.style.display = "block";
} else {
service1Sub.style.display = "none";
}

Did you change anything between your answer and now? It works well on my end now.

REMINDER

Toggle with JavaScript code