How to make a switch button useful?

clay · April 19, 2020

Hello guys,

I´m currently creating a website and have to use some kind of a switch button (in iOS-Style). I already implemented the switch button, however I want the user to switch with the button between two upcoming photo galleries. Because documentation in the www is lacking, I would need your support.

Because I´m pretty unexperienced in website coding, I used the W3school switch button (https://www.w3schools.com/howto/howto_css_switch.asp)

I hope you could help and I´m sorry for being such unexperienced but having high demands.

JMRKER · April 21, 2020

Is this what you are trying to accomplish?

<!DOCTYPE html><html lang="en"><head><title> Gallery Switch </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: http://w3schools.invisionzone.com/topic/61317-how-to-make-a-switch-button-useful/
      and: https://www.w3schools.com/howto/howto_css_switch.asp
-->
<title> Gallery Switch </title>

<style>
 html { box-sizing: border-box; }
 *, *:before, *:after { box-sizing: inherit; }
 .flex {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
    margin: 0; padding: 0;
 }
 .flex li {
	flex: 1 0 20%;
	min-width: 14em;   /* optional 200px, etc */     
	text-align: center;
    border: 1px solid black;
 }

 .hide { display: none; }
 img { width: 10em; height: 5em; margin: 1em; }
</style>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
</style>

</head>
<body>

<h2>Toggle Galleries Switch</h2>

<label class="switch">
  <input type="checkbox" id="gallery12">
  <span class="slider"></span>
</label>
<p>

<div id="gallery1" class=""> <h2>Gallery 1</h2>
 <ul class="flex">
  <li><img alt="Gallery 1 - Image 1"></li>
  <li><img alt="Gallery 1 - Image 2"></li>
  <li><img alt="Gallery 1 - Image 3"></li>
  <li><img alt="Gallery 1 - Image 4"></li>
  <li><img alt="Gallery 1 - Image 5"></li>
  <li><img alt="Gallery 1 - Image 6"></li>
  <li><img alt="Gallery 1 - Image 7"></li>
  <li><img alt="Gallery 1 - Image 8"></li>
  <li><img alt="Gallery 1 - Image 9"></li>
  <li><img alt="Gallery 1 - Image 10"></li>
 </ul>
</div>

<div id="gallery2" class="hide"> <h2>Gallery 2</h2>
 <ul class="flex">
  <li><img alt="Gallery 2 - Image 1"></li>
  <li><img alt="Gallery 2 - Image 2"></li>
  <li><img alt="Gallery 2 - Image 3"></li>
  <li><img alt="Gallery 2 - Image 4"></li>
  <li><img alt="Gallery 2 - Image 5"></li>
 </ul>
</div>

<script>
 function init() {
   document.getElementById('gallery12').addEventListener('click',
     function () { 
       document.getElementById('gallery1').classList.toggle('hide');
       document.getElementById('gallery2').classList.toggle('hide');
     }
   );
 } init();
</script>

</body>
</html>

Edited April 21, 2020 by JMRKER
Added responsive display

ishan_shah · October 12, 2020

you can simply apply js for that switch button for targeting image properties ,like "Show" and "Hide".

Sign In

How to make a switch button useful?

Recommended Posts

clay

Link to comment

Share on other sites

JMRKER

Link to comment

Share on other sites

ishan_shah

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity