How To Make Show And Hide Paragraph Using Checkbox

what i try to achieve in my below code by default home heading and paragraph is not show when i click on home checkbox then its show and also when i unclick then its hide my func

Solution 1:

I used two functions here for simplicity. First is your original myFunction() which picks the individual elements by ids and show hide them. I used active and fade classes to show hide bootstrap nav pills respectively. To show a tab-pane you need to append active class and remove fade class and to hide it you need to remove active class and add fade class.

Now for the second dynamic method hideShowById(event) I used the target element information which I took by event and did the same show hide procedure except the fact that the data has been picked out from source element just like bootstrap does.

functionmyFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("menu1");
  if (checkBox.checked == true){
    text.classList.add("active");
    text.classList.remove("fade");
  } else {
    text.classList.remove("active");
    text.classList.add("fade");
  }
}

functionhideShowById(event) {
  var checkBoxChecked = event.checked;
  var text = document.getElementById(event.getAttribute('data-toggle'));
  if (checkBoxChecked == true){
    text.classList.add("active");
    text.classList.remove("fade");
  } else {
    text.classList.remove("active");
    text.classList.add("fade");
  }
}

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><divclass="container"><inputclass="mr-1"type="checkbox"id="myCheck2"onclick="hideShowById(this)"data-toggle="home"checked><labelfor="myCheck2">home</label><inputclass="mr-1"type="checkbox"id="myCheck"onclick="myFunction()"><labelfor="myCheck">menu 1</label><inputclass="mr-1"type="checkbox"id="myCheck1"onclick="hideShowById(this)"data-toggle="abc"><labelfor="myCheck1">menu 2</label></div><divclass="container"><br><!-- Nav pills --><ulclass="nav nav-pills"role="tablist"><liclass="nav-item"id="text2"style="display:none"><aclass="nav-link active"data-toggle="pill"href="#home">Home</a></li><liclass="nav-item"id="text"style="display:none"><aclass="nav-link"data-toggle="pill"href="#menu1">Menu 1</a></li><liclass="nav-item"id="text1"style="display:none"><aclass="nav-link"data-toggle="pill"href="#abc">Menu 2</a></li></ul><!-- Tab panes --><divclass="tab-content"><divid="home"class="container tab-pane active"><br><h3>HOME</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><divid="menu1"class="container tab-pane fade"><br><h3>Menu 1</h3></div><divid="abc"class="container tab-pane fade"><br><h3>Menu 2</h3><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>