Can you display a Div Section by using a Toggle button?

Question

Can you display a Div Section by using a Toggle button?

function toggleSections(section1, section2, section3, section4) {
  document.getElementById(section1).style.display = "block";
  document.getElementById(section2).style.display = "none";
  document.getElementById(section3).style.display = "none";
  document.getElementById(section4).style.display = "none";
}

function changeButtonStyle(btn1, btn2, btn3, btn4) {

  document.getElementById(btn1).className = "btn btn-sm btn-block bluebg noround padd10";
  document.getElementById(btn2).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(btn3).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(btn4).className = "btn btn-block btn-sm greyback noround padd10";
}

.greyback {
  background-color: rgb(240, 240, 240) !important;
  color: #000000;
}

.bluebg {
  background-color: rgba(26, 167, 227, 1.00) !important;
  color: #FFFFFF !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-12">
  <div class="row">
    <div class="col-3">
      <button id="section1Btn" class="btn btn-block btn-sm lbbg" onclick="toggleSections('opt1','opt2','opt3','opt4'), changeButtonStyle('section1Btn','section2Btn','section3Btn','section4Btn')"> View</button></div>

    <div class="col-3"><button id="section2Btn" class="btn btn-block btn-sm greyback" onclick="toggleSections('opt2','opt1','opt3','opt4'), changeButtonStyle('section2Btn','section1Btn','section3Btn','section4Btn')">Add</button></div>

    <div class="col-3"> <button id="section3Btn" class="btn btn-block btn-sm greyback" onclick="toggleSections('opt3','opt1','opt2','opt4'), changeButtonStyle('section3Btn','section1Btn','section2Btn','section4Btn')">Modify</button></div>

    <div class="col-3"> <button id="section4Btn" class="btn btn-block btn-sm greyback" onclick="toggleSections('opt4','opt1','opt2','opt3'), changeButtonStyle('section4Btn','section1Btn','section2Btn','section3Btn')">Delete</button></div>


  </div>
</div>

<div id="opt1">Raj</div>
<div id="opt2">Ashok</div>
<div id="opt3">Manish</div>
<div id="opt4">Trivend</div>

I am experimenting with a JavaScript toggle option.

The initial state has the first button active (with blue background).
Initially, all hidden div sections are visible. The names should only appear when their corresponding button is clicked.
The last button is not functioning properly - neither changing color nor opening the fourth section.

I am learning how to use Bootstrap classes and customized button backgrounds.

Any assistance would be greatly appreciated.

javascript html css bootstrap-4

Answer 1

Answer №1

Exploring Point 1

The issue with your first button is that it has the lbbg class added, causing it to have a blue background and appear active. Removing this class and adding the greyback class will make it visible like the other buttons.

Investigating Point 2

Since you haven't specified a starting style for opt1, opt2, opt3, and opt4, they are visible by default. You can set their initial styles to display: none using CSS to hide them initially.

Diving into Point 3

In your code snippet:

onclick="showhidetog4('opt4',opt1','opt2','opt3'), optbttog3('ut4',ut1','ut2','ut3')"

you need to add a single quote before opt1 and ut1.

The corrected version should look like this:
onclick="showhidetog4('opt4','opt1','opt2','opt3'), optbttog3('ut4','ut1','ut2','ut3')"

I have provided the accurate code segment for your reference.

function showhidetog4(a, b, c, d) {
  document.getElementById(a).style.display = "block";
  document.getElementById(b).style.display = "none";
  document.getElementById(c).style.display = "none";
  document.getElementById(d).style.display = "none";
}

function optbttog3(a, b, c, d) {
  document.getElementById(a).className = "btn btn-sm btn-block lbbg noround padd10";
  document.getElementById(b).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(c).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(d).className = "btn btn-block btn-sm greyback noround padd10";
}

.greyback {
  background-color: rgb(240, 240, 240) !important;
  color: #000000;
}

.lbbg {
  background-color: rgba(26, 167, 227, 1.00) !important;
  color: #FFFFFF !important;
}

#opt1 {
  display: none;
}

#opt2 {
  display: none;
}

#opt3 {
  display: none;
}

#opt4 {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-12">
  <div class="row">
    <div class="col-3">
      <button id="ut1" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt1','opt2','opt3','opt4'), optbttog3('ut1','ut2','ut3','ut4')"> View</button>
    </div>

    <div class="col-3">
      <button id="ut2" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt2','opt1','opt3','opt4'), optbttog3('ut2','ut1','ut3','ut4')">Add</button>
    </div>

    <div class="col-3">
      <button id="ut3" class="btn btn-block btn-sm  greyback " onclick="showhidetog4('opt3','opt1','opt2','opt4'), optbttog3('ut3','ut1','ut2','ut4')">Modify</button>
    </div>

    <div class="col-3">
      <button id="ut4" class="btn btn-block btn-sm  greyback" onclick="showhidetog4('opt4','opt1','opt2','opt3'), optbttog3('ut4','ut1','ut2','ut3')">Delete</button>
    </div>
  </div>
</div>

<div id="opt1">Raj</div>
<div id="opt2">Ashok</div>
<div id="opt3">Manish</div>
<div id="opt4">Trivend</div>

Answer 2

Exploring Point 1

The issue with your first button is that it has the lbbg class added, causing it to have a blue background and appear active. Removing this class and adding the greyback class will make it visible like the other buttons.

Investigating Point 2

Since you haven't specified a starting style for opt1, opt2, opt3, and opt4, they are visible by default. You can set their initial styles to display: none using CSS to hide them initially.

Diving into Point 3

In your code snippet:

onclick="showhidetog4('opt4',opt1','opt2','opt3'), optbttog3('ut4',ut1','ut2','ut3')"

you need to add a single quote before opt1 and ut1.

The corrected version should look like this:
onclick="showhidetog4('opt4','opt1','opt2','opt3'), optbttog3('ut4','ut1','ut2','ut3')"

I have provided the accurate code segment for your reference.

function showhidetog4(a, b, c, d) {
  document.getElementById(a).style.display = "block";
  document.getElementById(b).style.display = "none";
  document.getElementById(c).style.display = "none";
  document.getElementById(d).style.display = "none";
}

function optbttog3(a, b, c, d) {
  document.getElementById(a).className = "btn btn-sm btn-block lbbg noround padd10";
  document.getElementById(b).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(c).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(d).className = "btn btn-block btn-sm greyback noround padd10";
}

.greyback {
  background-color: rgb(240, 240, 240) !important;
  color: #000000;
}

.lbbg {
  background-color: rgba(26, 167, 227, 1.00) !important;
  color: #FFFFFF !important;
}

#opt1 {
  display: none;
}

#opt2 {
  display: none;
}

#opt3 {
  display: none;
}

#opt4 {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-12">
  <div class="row">
    <div class="col-3">
      <button id="ut1" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt1','opt2','opt3','opt4'), optbttog3('ut1','ut2','ut3','ut4')"> View</button>
    </div>

    <div class="col-3">
      <button id="ut2" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt2','opt1','opt3','opt4'), optbttog3('ut2','ut1','ut3','ut4')">Add</button>
    </div>

    <div class="col-3">
      <button id="ut3" class="btn btn-block btn-sm  greyback " onclick="showhidetog4('opt3','opt1','opt2','opt4'), optbttog3('ut3','ut1','ut2','ut4')">Modify</button>
    </div>

    <div class="col-3">
      <button id="ut4" class="btn btn-block btn-sm  greyback" onclick="showhidetog4('opt4','opt1','opt2','opt3'), optbttog3('ut4','ut1','ut2','ut3')">Delete</button>
    </div>
  </div>
</div>

<div id="opt1">Raj</div>
<div id="opt2">Ashok</div>
<div id="opt3">Manish</div>
<div id="opt4">Trivend</div>

Can you display a Div Section by using a Toggle button?

Answer №1

Exploring Point 1

Investigating Point 2

Diving into Point 3

Similar questions

"Confusion arises when handling undefined arguments within async.apply in the context of async

The HTML checkbox remains unchanged even after the form is submitted

Struggling to align a vertical form horizontally in Bootstrap 4?

The event handler for clicking on the inner <li> element is not being triggered

exploring the ins and outs of creating computed properties in TypeScript

Why doesn't the let variable used in a for loop initialization extend its scope to the enclosing block?

"Converting circular structure into JSON" - Inserting BigQuery Data using Cloud Function in Node.js

I am experiencing issues with my React implementation of the bootstrap carousel

Exploring VueJS reactivity: Updating an array with new data

Display chosen preferences in an Angularjs dropdown alongside additional options

Contentful integrated into a NuxtJs website

A method to incorporate the profile_pic attribute from a different model into a single model

Storing an array in a cookie using Angular 8

Choose three different images and one corresponding word from a JavaScript array to be displayed individually on the screen in separate div containers

Tips for effectively displaying camera.position.set (x,y,z) and camera.lookAt (x,y,z) within a three.js environment

Not all properties are affected by the CSS stylesheet

Animate the React Bootstrap modal only when it is shown or hidden

Tips for Presenting Json Information in Bootstrap Columns

Ts2532, The existence of the object is potentially unsafe

Uncovering the source of glitchy Angular Animations - could it be caused by CSS, code, or ng-directives? Plus, a bonus XKCD comic for some light-hearted humor