CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
TheGuy
TheGuy

Reputation: 477

making a toggle button to change panels

I have two panels at the top of my application and one button at the button. By default only panel one must be visible, but by clicking on the button panel one fades away, and panel two fades in. I created the layout, but I do not know how to achieve it.

$(".panel2").hide();
$(document).ready(function() {
    $(".grid-button").on("click", function() {
        $(".grid").toggleClass("open close");
    });
});
div.app {
    margin:50px auto;
    width: 400px;
    height: 400px;
    border-radius:10px;
    overflow: hidden;
    position: relative;
}
div.app > .blur {
    width: 100%;
    height: 100%;
    background: url(http://goo.gl/0VTd9W);
    -webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
  position: absolute;
  left: 0px;
  text-align:center;
  color:#fff;
  font-size:20px;
}
div.mainSection{
  width:100%;
  height:85%;
  background:rgba(0,0,0,0.5);
  top:0;
}
div.dashboard{
  width:100%;
  height:15%;
  background:rgba(255,0,0,0.5);
  bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
    width: 100%;
    Height: 100%;
    Background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
}

.grid-button {
  background: none;
  border: none;
  padding: 3px;
  width: 100%;
}

.grid {
  display: inline-block;
  height: 4px;
  position: relative;
  width: 32px;
  transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
  content: '';
  position: absolute;
  background-color: #FFF;
  display: inline-block;
  height: 4px;
  left: 0;
  width: 32px;
  transition: all 0.3s ease-in-out;
}

.grid.open {
  background-color: #FFF;
}
.grid.open:after {
  top: 10px;
}
.grid.open:before {
  top: -10px;
}

.grid.close {
  background-color: transparent;
  transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
  top: 0;
  transform-origin: 50% 50%;
}
.grid.close:before {
  transform: rotate(135deg);
}
.grid.close:after {
  transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
  <div class="blur"></div>
  <div class="mainSection">
    <div class="panel1">Panel1</div>
    <div class="panel2">Panel2</div>
  </div>
  <div class="dashboard">
    <div class="grid-button">
      <span class="grid open"></span>
    </div>
  </div>
</div>

First of all since I did $('.panel2').hide();, in page load first it loads the panel then hides it. How can I make it invisible from the beginning?

Secondly how can I make the panel2 visible only by pressing the button?

And finally is there anyway to add some transitions effects for changing panels?

Upvotes: 1

Views: 700

Answers (2)

gaetanoM
gaetanoM

Reputation: 42044

You may try:

$(".grid-button").on("click", function() {
   var visibleObj = $('.mainSection div:visible');
   var inVisibleObj = $('.mainSection div:hidden');
   visibleObj.fadeOut(500, function() {
       inVisibleObj.fadeIn(500);
   });
});

While for the visibility you need:

<div class="panel2" style="display: none;">Panel2</div>

The running snippet:

$(function () {
  $(".grid-button").on("click", function() {
    var visibleObj = $('.mainSection div:visible');
    var inVisibleObj = $('.mainSection div:hidden');
    visibleObj.fadeOut(500, function() {
      inVisibleObj.fadeIn(500);
    });
  });
});
div.app {
  margin:50px auto;
  width: 400px;
  height: 400px;
  border-radius:10px;
  overflow: hidden;
  position: relative;
}
div.app > .blur {
  width: 100%;
  height: 100%;
  background: url(http://goo.gl/0VTd9W);
  -webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
  position: absolute;
  left: 0px;
  text-align:center;
  color:#fff;
  font-size:20px;
}
div.mainSection{
  width:100%;
  height:85%;
  background:rgba(0,0,0,0.5);
  top:0;
}
div.dashboard{
  width:100%;
  height:15%;
  background:rgba(255,0,0,0.5);
  bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
  width: 100%;
  Height: 100%;
  Background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
}

.grid-button {
  background: none;
  border: none;
  padding: 3px;
  width: 100%;
}

.grid {
  display: inline-block;
  height: 4px;
  position: relative;
  width: 32px;
  transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
  content: '';
  position: absolute;
  background-color: #FFF;
  display: inline-block;
  height: 4px;
  left: 0;
  width: 32px;
  transition: all 0.3s ease-in-out;
}

.grid.open {
  background-color: #FFF;
}
.grid.open:after {
  top: 10px;
}
.grid.open:before {
  top: -10px;
}

.grid.close {
  background-color: transparent;
  transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
  top: 0;
  transform-origin: 50% 50%;
}
.grid.close:before {
  transform: rotate(135deg);
}
.grid.close:after {
  transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="app">
    <div class="blur"></div>
    <div class="mainSection">
        <div class="panel1">Panel1</div>
        <div class="panel2" style="display: none;">Panel2</div>
    </div>
    <div class="dashboard">
        <div class="grid-button">
            <span class="grid open"></span>
        </div>
    </div>
</div>

Upvotes: 2

MorKadosh
MorKadosh

Reputation: 6006

To make one of the panels hidden in the first place, I'd use a css class called hidden:

.hidden{
  display : none;
}

Which simply makes what it sounds like, hiding the element. Than, I'd set this class in the HTML decleration:

<div class="panel2 hidden">Panel2</div>

That will hide panel2 on page load, and by that you don't have to hide it using js code.

Than, I'd use a helper css class called panel that stands to be a panel identifier (you can either use the data attribute, or any other way of identifying those elements). For 5 panels, it would look like this:

<div class="panel panel1">Panel1</div>
<div class="panel panel2 hidden">Panel2</div>
<div class="panel panel3 hidden">Panel3</div>
<div class="panel panel4 hidden">Panel4</div>
<div class="panel panel5 hidden">Pane5</div>

At last, to make this work for any number of panels you want (not necesseraly 2), I'd use a "carousel" effect to toggle the panels visibility, while having a way to keep track with them (adding and removing the hidden class), and use the fadeIn/fadeOut effect. (again, instead of identifying the panels using the panel1,panel2,panel3... classes, you can always use the data attribute (please read more about it in jQuery docs), or in any other way).

var currentPanel = 1;
$(".grid-button").on("click", function() {

    $(".grid").toggleClass("open close");        
    $(".panel"+currentPanel).fadeOut("normal", function(){
        $(this).addClass('hidden');
    });

    currentPanel = currentPanel >= $(".panel").length ?  1 :  currentPanel+1;
    $(".panel"+currentPanel).fadeIn().removeClass('hidden');
});

Just note that the hidden class actually "looses" it's functionality after the first click, since jQuery changes the display property inline, but I think that it might not be harmful to keep them anyway (it will be easier to track them).

You can see an example here: https://jsfiddle.net/j79y5kdb/3/

Upvotes: 1

Related Questions