I was working the project where there is two view and three view (or if possible multiple view). Here in my code selected option normal creates two div placed vertically and Three view creates three view vertically (i.e adding one more div in Normal option). Here default one is Normal

.header{
        width:100%;
        height:40px;
 background:#f4f3f1;
        border: 1px solid #dbdfe5;
        text-align: center;
        font-size: 20px;
        padding-top:0px;
 color: green;
 font-weight:bold;
}
.container{
        width: 100%;
        min-height: 150px;
        padding-top:2px;
        display: flex;
}
.container .box1{
        background: #ffffff;
        border-radius: 3px;
        border: 2px solid #dbdfe5;
        flex: 1;
  overflow: auto;
}
.container .box1 #inside{
        width:100%;
        height:35px;
        border: 1px solid #dbdfe5;
        padding-bottom:10px;
        border-radius: 1px;
        background:#f4f3f1;
}
.container .box1.box2{
        background: #ffffff;
        border-radius: 3px;
  overflow: auto;
}
.container .box1.box2 #second{
        width:100%;
        height:35px;
        border: 1px solid #dbdfe5;
        border-radius: 5px;
        padding-bottom:10px;
        background:#f4f3f1;
}
.tabb{
        float:left;
        margin-left:10px;
  margin:5px;
  display: inline-block;
        padding: 6px 12px;
        border-radius: 5px;
}
<body>
   <div class="header">
 <select class="tabb" name="opt" id="opt" >
   <option value="two">Normal </option>
   <option value="three">Three view</option>
 </select>
 Demo </div>
   <div class="container">
        <div class="box1">  
            <div id="inside" > 
  <center>Inside Box1</center>
            </div> 
     <center>Main Box1</center>
 </div>

        <div class="box1 box2">
            <div id="second" >
                <center>Inside Box2</center>
            </div>
            <center>Main Box2</center>
        </div>
    </div>
</body>

Currently by default two div is created, how can I create 3 div on selecting the Three view of selection menu, placed vetically. In code how to dynamically create <div class="box1 box2 box3"> .

2 Answers

1
mplungjan On Best Solutions

You mean this?

Also IDs need to be unique

$(function() {
  $("#opt").on("change", function() {
    $(".box3").toggle(this.value == "three"); // toggle will show if true, hide if false
  }).change()
})
.header {
  width: 100%;
  height: 40px;
  background: #f4f3f1;
  border: 1px solid #dbdfe5;
  text-align: center;
  font-size: 20px;
  padding-top: 0px;
  color: green;
  font-weight: bold;
}

.container {
  width: 100%;
  min-height: 150px;
  padding-top: 2px;
  display: flex;
}

.container .box1 {
  background: #ffffff;
  border-radius: 3px;
  border: 2px solid #dbdfe5;
  flex: 1;
  overflow: auto;
}

.container .box1 #first {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  padding-bottom: 10px;
  border-radius: 1px;
  background: #f4f3f1;
}

.container .box1.box2 {
  background: #ffffff;
  border-radius: 3px;
  overflow: auto;
}

.container .box1.box2 #second {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.container .box1.box2.box3 #third {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.tabb {
  float: left;
  margin-left: 10px;
  margin: 5px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="header">
    <select class="tabb" name="opt" id="opt">
      <option value="two">Normal </option>
      <option value="three">Three view</option>
    </select>
    Demo </div>
  <div class="container">
    <div class="box1">
      <div id="first">
        <center>Inside Box1</center>
      </div>
      <center>Main Box1</center>
    </div>

    <div class="box1 box2">
      <div id="second">
        <center>Inside Box2</center>
      </div>
      <center>Main Box2</center>
    </div>

    <div class="box1 box2 box3">
      <div id="third">
        <center>Inside Box3</center>
      </div>
      <center>Main Box3</center>
    </div>


  </div>
</body>

To add views, try this:

var views = {
  "three": ".box3",
  "four": ".box3,.box4"
}
$(function() {
  $("#opt").on("change", function() {
    var view = views[this.value]; // if three or four
    $(".box3,.box4").hide(); // hide anyway
    if (view) $(view).show(); // show box2 or box3 and box4
  }).change()
})
.header {
  width: 100%;
  height: 40px;
  background: #f4f3f1;
  border: 1px solid #dbdfe5;
  text-align: center;
  font-size: 20px;
  padding-top: 0px;
  color: green;
  font-weight: bold;
}

.container {
  width: 100%;
  min-height: 150px;
  padding-top: 2px;
  display: flex;
}

.container .box1 {
  background: #ffffff;
  border-radius: 3px;
  border: 2px solid #dbdfe5;
  flex: 1;
  overflow: auto;
}

.container .box1 #first {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  padding-bottom: 10px;
  border-radius: 1px;
  background: #f4f3f1;
}

.container .box1.box2 {
  background: #ffffff;
  border-radius: 3px;
  overflow: auto;
}

.container .box1.box2 #second {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.container .box1.box2.box3 #third {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.container .box1.box2.box4 #fourth {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.tabb {
  float: left;
  margin-left: 10px;
  margin: 5px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="header">
    <select class="tabb" name="opt" id="opt">
      <option value="two">Normal </option>
      <option value="three">Three view</option>
      <option value="four">Four view</option>
    </select>
    Demo </div>
  <div class="container">
    <div class="box1">
      <div id="first">
        <center>Inside Box1</center>
      </div>
      <center>Main Box1</center>
    </div>

    <div class="box1 box2">
      <div id="second">
        <center>Inside Box2</center>
      </div>
      <center>Main Box2</center>
    </div>

    <div class="box1 box2 box3">
      <div id="third">
        <center>Inside Box3</center>
      </div>
      <center>Main Box3</center>
    </div>

    <div class="box1 box2 box4">
      <div id="fourth">
        <center>Inside Box4</center>
      </div>
      <center>Main Box4</center>
    </div>


  </div>
</body>

0
Javad Ebrahimi On

first you must addEventListener for your select input and when you chose Three View:

//create div element
const div = documnet.createElement('div');

// add class name
div.className = 'box1 box2 box3';

// get container
const container = document.getElementsByClassName('container')[0];

// add div to container
container.appendChild(div);