Through Toggle button show Div Section?

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;
}

<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 lbbg" 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>

I am trying to use toggle javascript option.

1. The first view button is active by default (with blue bg) some how.
2. All the hidden div is appearing on the first section is visible. The names should appear when the corresponding button is clicked rather than all appearing by default.
3. The last button is also not working neither getting change button color nor the 4th div is opening.

I am just learning how to do via using bootstrap class and some button bg that I have modified.

It will great if some one help me on this.

Answer

For point 1

Your first button has the classes lbbg added which is probably causing the button to be active (blue background). You can remove it and add the greyback class for it to be visible like the other buttons.

For point 2

Since you have not provided a starting style for the opt1, opt2, opt3, opt4, they are visible by default. What you can do is give then starting styles of display: none using css.

For point 3

In your code
onclick="showhidetog4('opt4',opt1','opt2','opt3'), optbttog3('ut4',ut1','ut2','ut3')"
you have missed adding a ‘ symbol before opt1 and ut1

It should be like this
onclick=”showhidetog4(‘opt4’,'opt1′,’opt2′,’opt3′), optbttog3(‘ut4’,'ut1′,’ut2′,’ut3′)”

I have added the correct snippet for your clarification.

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>