Js_from_zero/day_17_expanding_grid.html at main · Manisha1998-singh/Js_from_zero · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
    <head>
    </head>
    <body>
     <style>
.column {
    float: left;
    width: 30%;
    padding: 25px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Closable button inside the image */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
     </style>
     <div class="row">
        <div class="column" onclick="openTab('b1');" style="background:green;">Box 1</div>
        <div class="column" onclick="openTab('b2');" style="background:blue;">Box 2</div>
        <div class="column" onclick="openTab('b3');" style="background:red;">Box 3</div>
      </div>

      <!-- The expanding grid (hidden by default) -->
      <div id="b1" class="containerTab" style="display:none;background:green">
        <!-- If you want the ability to close the container, add a close button -->
        <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
        <h2>Box 1</h2>
        <p>Lorem ipsum..</p>
      </div>

      <div id="b2" class="containerTab" style="display:none;background:blue">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
        <h2>Box 2</h2>
        <p>Lorem ipsum..</p>
      </div>

      <div id="b3" class="containerTab" style="display:none;background:red">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
        <h2>Box 3</h2>
        <p>Lorem ipsum..</p>
        </div>
     <script>
            //  var element = document.getElementsById('b1');
            //  var listbtn = document.getElementById('b2');
            //  var gridbtn = document.getElementById('b3');
            //  var i = document.getElementsByClassName('closebtn');

            //  function openTab1(){
            //          b1.style.display = 'inline';
            //          parentElement.style.display= 'none';
            //          b2.style.display = 'none';
            //          b3.style.display = 'none';
            //  }
            //  function openTab2(){
            //          b2.style.display = 'inline';
            //          i.style.display = 'inline';
            //          b1.style.display = 'none';
            //          b3.style.display = 'none';
            //  }
            //  function openTab3(){
            //          b3.style.display = 'inline';
            //          i.style.display = 'inline';
            //          b1.style.display = 'none';
            //          b2.style.display = 'none';
            //  }


            function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName("containerTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}


     </script>
    </body>
</html>