How can I hide first the input fields and it's label first then it will show when I clicked the button

Question

The tricky part on that input field is I can't hide the input field without adding:important how can I remove the display?inline-block?

My goal is to hide first the input fields then when I click the add another secondary license it will show. Take note that I can't edit the style code it defaults on the library I used

 <button onclick="myFunction()">ADD ANOTHER SECONDARY LICENSE</button></center> <div class="wcfm-clearfix"></div> </div> <p class="a3a9af25dc3a4afd10d5b86f91fd115a wcfm_title"><strong>TYPE2</strong></p><label class="screen-reader-text" for="a3a9af25dc3a4afd10d5b86f91fd115a">TYPE2</label><input type="text" id="a3a9af25dc3a4afd10d5b86f91fd115a" name="wcfmvm_custom_infos[type2]" class="wcfm-text" value="" placeholder="" /> <p class="b9cb81bdafe237e5d269b1c3714d175e wcfm_title"><strong>NUMBER2</strong></p><label class="screen-reader-text" for="b9cb81bdafe237e5d269b1c3714d175e">NUMBER2</label><input type="text" id="b9cb81bdafe237e5d269b1c3714d175e" name="wcfmvm_custom_infos[number2]" class="wcfm-text" value="" placeholder="" /> <p class="d674f2caf5f73c6a51202e3f6186d03a wcfm_title wcfm_html_content_title"><strong> <script> function myFunction() { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "block"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "block"; } </script> <style> #wcfm_membership_container input[type=text], #wcfm_membership_container input[type=file], #wcfm_membership_container input[type=password], #wcfm_membership_container select, #wcfm_membership_container input[type=number], #wcfm_membership_container input[type=time], #wcfm_membership_container input[type=search], #wcfm_membership_container textarea { background-color: #fff;important: border; 1px solid #ccc:important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 8px 10px; width: 60%; margin-bottom: 15px; font-size: 15px; display: inline-block; box-shadow: 1px 1px 5px 0 #e9e9e9; line-height: 18px; } </style>

Answer 1

You can maybe use this hidden attribute?

elt.setAttribute('hidden', '');
elt.removeAttribute('hidden');

Answer 2

I've used window.onload event to hide those input fields in default and then if you click on the button they will be visible.

 <button onclick="myFunction()">ADD ANOTHER SECONDARY LICENSE</button></center> <div class="wcfm-clearfix"></div> </div> <p class="a3a9af25dc3a4afd10d5b86f91fd115a wcfm_title"><strong>TYPE2</strong></p><label class="screen-reader-text" for="a3a9af25dc3a4afd10d5b86f91fd115a">TYPE2</label><input type="text" id="a3a9af25dc3a4afd10d5b86f91fd115a" name="wcfmvm_custom_infos[type2]" class="wcfm-text" value="" placeholder="" /> <p class="b9cb81bdafe237e5d269b1c3714d175e wcfm_title"><strong>NUMBER2</strong></p><label class="screen-reader-text" for="b9cb81bdafe237e5d269b1c3714d175e">NUMBER2</label><input type="text" id="b9cb81bdafe237e5d269b1c3714d175e" name="wcfmvm_custom_infos[number2]" class="wcfm-text" value="" placeholder="" /> <p class="d674f2caf5f73c6a51202e3f6186d03a wcfm_title wcfm_html_content_title"><strong> <script> window.onload = () => { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "none"; document.querySelector(`label[for="b9cb81bdafe237e5d269b1c3714d175e"]`).style.display = "none"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "none"; document.querySelector(`label[for="a3a9af25dc3a4afd10d5b86f91fd115a"]`).style.display = "none"; } function myFunction() { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "block"; document.querySelector(`label[for="b9cb81bdafe237e5d269b1c3714d175e"]`).style.display = "block"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "block"; document.querySelector(`label[for="a3a9af25dc3a4afd10d5b86f91fd115a"]`).style.display = "block"; } </script> <style> #wcfm_membership_container input[type=text], #wcfm_membership_container input[type=file], #wcfm_membership_container input[type=password], #wcfm_membership_container select, #wcfm_membership_container input[type=number], #wcfm_membership_container input[type=time], #wcfm_membership_container input[type=search], #wcfm_membership_container textarea { background-color: #fff;important: border; 1px solid #ccc:important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 8px 10px; width: 60%; margin-bottom: 15px; font-size: 15px; display: inline-block; box-shadow: 1px 1px 5px 0 #e9e9e9; line-height: 18px; } </style>

Answer 3

You can use it:

element.setAttribute('style', 'display:inline !important');
// or
element.style.cssText = 'display:inline !important';
// or
element.style.setProperty("display", "inline", "important")

Answer 4

You can achieve that with CSS by wrapping the element you want to hide with div and give display: none . And on click change display to block

<div style="display:none" id="show">
[elements that you want to hide]
</div>

function myFunction() {
  document.getElementById("show").style.display = "block";
}