help to make 2 divs with bootstrap4-toggle

[jesussuarz]

I'm pretty new to javascript. so I need a little help with this.

I try to use this:

<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
  $(function() {
    $('#toggle-event').change(function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
    })
  })
</script>

I will make a section of plans on my website, yearly and monthly.

You can see the example on this website: https://cangurohosting.com/hosting/

I need to start 1 div with a content and then when they click on the toggle then hide the first one and start the second one.

I hope you can understand me.

[Kholodny]

Hi! It's very easy! I hope you understand.

$("#toggle-event").change(function() {
    if ($('#toggle-event').is(":checked")){
        $('.divforhide').hide(); //multi hide all divs
        $('.divfordisplay').css('display', 'inline'); //multi show all divs
        //or: 
        $("#first,#second,#third,#etc").hide() //multi hide all id's
        $("#first,#second,#third,#etc").css('display', 'inline') //multi hide all id's
    } else {
        $('.divforhide').hide(); //multi hide all divs
        $('.divfordisplay').css('display', 'inline'); //multi show all divs
        //or: 
        $("#first,#second,#third,#etc").hide() //multi hide all id's
        $("#first,#second,#third,#etc").css('display', 'inline') //multi show all id's
    } 
});

Don't forget to import jquery