I have to change class using script, html,css

Question

I gave class to div as col-sm-10. But on click, I want that class to be col-sm-12 of that div. I mean, I want it to be responsive

function openNav() {
  document.getElementById("mySidenav").style.width = "15%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  background-color: #4682B4;
  overflow-x: hidden;
  transition: 0.5s;
}

.table {
  border: 1;
  width: 100%;
  height: 100%;
  margin-top: 7%;
}

<div class="row">
  <div class="col-sm-2">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>

      <div class="menus">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

  </div>
  <div class="col-sm-10">
    <table class="table">
      <tr>
        <th>Sr No.</th>
        <th>Title</th>
        <th>Name</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
      </tr>
    </table>
  </div>
</div>

on page load div col-sm-10 would be col-sm-12 and in openNav() function I want it to be again col-sm-10 and viceversa

can anybody help me out with the same?

Answer 1

$(".col-sm-10").click(function(){
    $(".col-sm-10").addClass("col-sm-12").removeClass('col-sm-10');
    alert('class changed')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">
   <div class="col-sm-2">
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>
    
    <div class="menus">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    </div>
  </div>
  
   <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
   
 </div>
 <div class="col-sm-10"> 
   <table class="table">  
      <tr>
       <th>Sr No.</th>
       <th>Title</th>
       <th>Name</th>
       <th>Picture</th>
       <th>Action</th>
       <th>Picture</th>
       <th>Action</th>
       <th>Picture</th>
       <th>Action</th>
       <th>Picture</th>
       <th>Action</th>
      </tr>
   </table>
 </div>
</div>

HOPE this make sense to you how to change class

Answer 2

Here is a snippet that should do what you want using only (vanilla) Javascript.
I've added the variable affectations at the beginning, and one line to change the className in both of your functions:

(I also added FontAwesome and some styling to make the snippet effect visual.)

var mySidenav = document.getElementById("mySidenav");
var table = document.getElementsByClassName("col-sm-10")[0];

function openNav() {
  mySidenav.style.width = "15%";
  // Solution to toggle between classes
  table.classList.add('col-sm-12');
  table.classList.remove('col-sm-10');
}

function closeNav() {
  mySidenav.style.width = "0";
  // Solution when you can replace all the class='…' string
  table.className = 'col-sm-10';
}

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  background-color: #4682B4;
  overflow-x: hidden;
  transition: 0.5s;
}

.table {
  border: 1;
  width: 100%;
  height: 100%;
  margin-top: 7%;
}


/* Added to make it visual */
.col-sm-10,
.col-sm-12 {
  transition: 0.5s;
}

.col-sm-12 {
  margin-left: 15%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-2">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>

      <div class="menus">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

  </div>
  <div class="col-sm-10">
    <table class="table">
      <tr>
        <th>Sr No.</th>
        <th>Title</th>
        <th>Name</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
      </tr>
    </table>
  </div>
</div>

I hope it helps!

Answer 3

you can add class by

$("button").click(function(){
    $("selector").addClass("class_name");
});

And to remove class, use

$("button").click(function(){
    $("selector").removeClass("class_name");
});

For futher information you can visit https://www.w3schools.com/jquery/html_addclass.asp