Wsrtjtyk

I have two div's in the same place and I only show one at a time. I have a function that hides one div and then shows the other and vice versa. My problem is that one of the divs is showing in the corner of the container after I hide it for 1 second, it is originally centered but when I hide it I set the width and height to 0. When it is in the corner the styling is gone and I only see the text from it and the button I use that holds the function to change divs, and it disappears after a second. I'm not sure why this is happening and would appreciate some help with this.

here is an example html of this -

<div class='event-container'>

                <div class='events hidden'>

                    <span class='no-Events event-message'>no Events this Day</span>

                    <span class='event-title event-message'></span>

                    <span class='event-desc event-message'></span>

                    <button class='show-event-form rotate'>Submit</button>

                </div>

                <form class='new-event-form'>

                    <legend>Submit New Event</legend>

                    <input id='new-event-title' type='text' name='title' placeholder='title'>

                    <input id='new-event-desc' type='text' name='desc' placeholder='desc'>

                    <input type='submit' class='submit-event rotate' value='submit'>

                </form>

  </div>

Either the .events div will show or the .new-event-form Form will show/hide.

I use these css classes to show/hide them

.hidden {

    height: 0; opacity: 0; width: 0;

    transition: height 0ms 400ms, opacity 200ms 0ms, width 0ms 0ms;

}



.visible {

    height: 100%; opacity: 1; width: 100%;

    transition: height 200ms 0ms, opacity 600ms 200ms, width 0ms 0ms;

}

here is the css for .new-event-form and .events

.new-event-form{

    width: 100%;

    display:flex;

    flex-direction: column;

    justify-content: space-evenly;

    text-align: center;

}



.events{

    height: 100%;

    display:flex;

    flex-direction: column;

    align-items: center; /*center children vertically*/

}

And this function changes the div's between show/hide classes

const hideShowEventsDiv = ()=> {

     let eventsDiv = document.querySelector('.events');

     let newEventForm = document.querySelector('.new-event-form');



     if(eventsDiv.classList.contains('hidden')){

         //show Events

        newEventForm.classList.add('hidden');

        newEventForm.classList.remove('visible');

        eventsDiv.classList.remove('hidden');

        eventsDiv.classList.add('visible');

     } else {

         //show new Event Form

        eventsDiv.classList.remove('visible');

        eventsDiv.classList.add('hidden');

        newEventForm.classList.remove('hidden');

        newEventForm.classList.add('visible');

     }   

 }

eventListner for this

//Submit form and show event or new event form

 document.addEventListener('click', (e)=>{

     if(e.target.classList.contains('rotate')){

        e.preventDefault();

        newEvent.submit();

        newEvent.clear();

     //  ---> this one hides/shows the div 

       hideShowEventsDiv();

     }

 });

This problem is only happening for the .events Div. The .new-event-form Form is not having any issues with fading or showing in the corner and then dissapearing when I try to hide it, that is only the .events div with this problem

If you're talking about how the date text ("No events on [date]") and the button get all squeezed up during the transition, it's because you shrink their parent by setting its width property to 0. setting the overflow property to hidden in your hidden class will solve this issue :)

window.onload = ()=>{

  let btn = document.querySelector('#toggler');

  btn.addEventListener('click', function(){

    // grab the events div

    let eventsDiv = document.querySelector('#events');

    // grab our mock form

    let eventForm = document.querySelector('#event-form');

    // toggle does the conditional you had before

    // it ascts like a switch, removing the class if its there

    // and adding it in otherwise.

    eventForm.classList.toggle('hidden');

    eventsDiv.classList.toggle('hidden');

  });

};

.big-container {

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 15px;

}



.container {

  height: 200px;

  display: flex;

  flex-direction: column;

  transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out;

  text-align: center;

}



.container-item {

  background-color: orange;

  height: 100px;

  margin: 15px;

  box-shadow: 0 5px 10px 2px black;

}



.hidden {

  height: 0;

  opacity: 0;

  width: 0;

  overflow: hidden;

}



#events {

  background-color: green;

}



#event-form {

  background-color: red;

}



#placeholder {

  background-color: pink;

  height: 200px;

  width: 200px;

}

<div class="big-container">

  <div class="big-container" id="placeholder">

    <input type="button" value="toggle visibility" id="toggler">

  </div>

  <div class="big-container">

    <div class="container" id="events">

      <span class="container-item">There are no events on November 17, 2018</span>

      <span class="container-item"></span>

      <span class="container-item"></span>

      <button class="container-item" id="btn-events">I am a button</button>

    </div>

    <div class="container hidden" id="event-form">

      <div class="container-item"></div>

      <div class="container-item"></div>

      <div class="container-item"></div>

      <button class="container-item" id="btn-submit">I am another button</button>

    </div>    

  </div>

</div>

Also, here's a working example and a modified version of your pen :)