Categories
HTML

How to hide div by default and show it on click with Bootstrap?

Sometimes, we want to hide div by default and show it on click with Bootstrap.

In this article, we’ll look at how to hide div by default and show it on click with Bootstrap.

How to hide div by default and show it on click with Bootstrap?

To hide div by default and show it on click with Bootstrap, we add the data-toggle attribute.

For instance, we write

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">
  Toggle Bar
</button>

<div id="Foo" class="collapse">This div is hidden by default</div>
<div id="Bar" class="collapse in">
  This div is shown by default and can toggle
</div>

to add an a element and a button that has the data-toggle attribyte set to collapse.

We also set the href attribute to the IDs of the divs.

And then we have 2 divs that has the collapse class which we can toggle with the a and button elements respectively.

The in class makes the div show by default.

Conclusion

To hide div by default and show it on click with Bootstrap, we add the data-toggle attribute.

Categories
HTML

How to set value to currency in number input with HTML?

Sometimes, we want to set value to currency in number input with HTML.

In this article, we’ll look at how to set value to currency in number input with HTML.

How to set value to currency in number input with HTML?

To set value to currency in number input with HTML, we set the step attribute.

For instance, we write

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

to set the step attribute to 0.01 to let us enter numbers with 2 decimal places.

Conclusion

To set value to currency in number input with HTML, we set the step attribute.

Categories
HTML

How to store and retrieve JavaScript arrays into and from HTML5 data attributes?

Sometimes, we want to store and retrieve JavaScript arrays into and from HTML5 data attributes.

In this article, we’ll look at how to store and retrieve JavaScript arrays into and from HTML5 data attributes.

How to store and retrieve JavaScript arrays into and from HTML5 data attributes?

To store and retrieve JavaScript arrays into and from HTML5 data attributes, we can put the array directly in the element.

For instance, we write

<div id="demo" data-stuff='["some", "string", "here"]'></div>

to set the data-stuff attribute to the ["some", "string", "here"] array string.

Conclusion

To store and retrieve JavaScript arrays into and from HTML5 data attributes, we can put the array directly in the element.

Categories
HTML

How to create a select box with a search option with HTML?

Sometimes, we want to create a select box with a search option with HTML.

In this article, we’ll look at how to create a select box with a search option with HTML.

How to create a select box with a search option with HTML?

To create a select box with a search option with HTML, we use the datalist element.

For instance, we write

<input list="brow" />
<datalist id="brow">
  <option value="Internet Explorer"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>

to add a datalist element with an id that matches the list attribute value to use the option elements as the autocomplete choices.

When we type in the input, we should see the possible matches show in a drop down list.

Conclusion

To create a select box with a search option with HTML, we use the datalist element.

Categories
HTML

How to make an HTML form with two submit buttons and two “target” attributes?

Sometimes,. we want to make an HTML form with two submit buttons and two "target" attributes.

In this article, we’ll look at how to make an HTML form with two submit buttons and two "target" attributes.

How to make an HTML form with two submit buttons and two "target" attributes?

To make an HTML form with two submit buttons and two "target" attributes, we add the formaction attribute to each button.

For instance, we write

<!DOCTYPE html>
<html>
  <body>
    <form>
      <input
        type="submit"
        formaction="firsttarget.php"
        value="Submit to first"
      />
      <input
        type="submit"
        formaction="secondtarget.php"
        value="Submit to second"
      />
    </form>
  </body>
</html>

to set the formaction attribute of each button to the URL to make the request to when we click on it.

Conclusion

To make an HTML form with two submit buttons and two "target" attributes, we add the formaction attribute to each button.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.