i cannot switch tabs using javascript

Question

When i'm trying to switch from signup to login i'm unable to switch so please help me in finding the problem.i think there is a problem in my javascript because the rest works fine

Here is my html code:

<div class="form">

  <ul class="tab-group">
    <li class="tab active"><a href="#signup">Sign Up</a></li>
    <li class="tab"><a href="#login">Log In</a></li>
  </ul>

  <div class="tab-content">
    <div id="signup">   
      <h1>Sign Up for Free</h1>

      <form action="/" method="post">

      <div class="top-row">
        <div class="field-wrap">
          <label>
            First Name<span class="req">*</span>
          </label>
          <input type="text" required autocomplete="off" />
        </div>

        <div class="field-wrap">
          <label>
            Last Name<span class="req">*</span>
          </label>
          <input type="text"required autocomplete="off"/>
        </div>
      </div>

      <div class="field-wrap">
        <label>
          Email Address<span class="req">*</span>
        </label>
        <input type="email"required autocomplete="off"/>
      </div>

      <div class="field-wrap">
        <label>
          Set A Password<span class="req">*</span>
        </label>
        <input type="password"required autocomplete="off"/>
      </div>

      <button type="submit" class="button button-block"/>Get        Started</button>

      </form>

    </div>

    <div id="login">   
      <h1>Welcome Back!</h1>

      <form action="/" method="post">

        <div class="field-wrap">
        <label>
          Email Address<span class="req">*</span>
        </label>
        <input type="email"required autocomplete="off"/>
      </div>

      <div class="field-wrap">
        <label>
          Password<span class="req">*</span>
        </label>
        <input type="password"required autocomplete="off"/>
      </div>

      <p class="forgot"><a href="#">Forgot Password?</a></p>

      <button class="button button-block"/>Log In</button>

      </form>

    </div>

       </div><!-- tab-content -->

         </div> <!-- /form -->

Here is my CSS code :

*, *:before, *:after {
 box-sizing: border-box;
  }

   html {
    overflow-y: scroll;
        }

    body {
    background: #c1bdba;
    font-family: 'Titillium Web', sans-serif;
     }

    a {
     text-decoration: none;
      color: #1ab188;
      -webkit-transition: .5s ease;
       transition: .5s ease;
      }
      a:hover {
      color: #179b77;
       }

      .form {
       background: rgba(19, 35, 47, 0.9);
       padding: 40px;
       max-width: 600px;
       margin: 40px auto;
       border-radius: 4px;
       box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
       }

       .tab-group {
        list-style: none;
        padding: 0;
        margin: 0 0 40px 0;
        }
       .tab-group:after {
        content: "";
        display: table;
        clear: both;
         }
        .tab-group li a {
         display: block;
         text-decoration: none;
         padding: 15px;
         background: rgba(160, 179, 176, 0.25);
         color: #a0b3b0;
         font-size: 20px;
         float: left;
         width: 50%;
         text-align: center;
         cursor: pointer;
         -webkit-transition: .5s ease;
          transition: .5s ease;
           }
         .tab-group li a:hover {
         background: #179b77;
         color: #ffffff;
         }
        .tab-group .active a {
         background: #1ab188;
         color: #ffffff;
         }

         .tab-content > div:last-child {
         display: none;
         }

         h1 {
          text-align: center;
          color: #ffffff;
           font-weight: 300;
           margin: 0 0 40px;
           }

             label {
             position: absolute;
            -webkit-transform: translateY(6px);
            transform: translateY(6px);
            left: 13px;
              color: rgba(255, 255, 255, 0.5);
           -webkit-transition: all 0.25s ease;
              transition: all 0.25s ease;
               -webkit-backface-visibility: hidden;
                pointer-events: none;
          font-size: 22px;
           } 
           label .req {
            margin: 2px;
           color: #1ab188;
             } 

            label.active {
             -webkit-transform: translateY(50px);
               transform: translateY(50px);
             left: 2px;
              font-size: 14px;
               }
            label.active .req {
              opacity: 0;
              }

             label.highlight {
              color: #ffffff;
                }

            input, textarea {
                 font-size: 22px;
              display: block;
            width: 100%;
              height: 100%;
             padding: 5px 10px;
              background: none;
             background-image: none;
              border: 1px solid #a0b3b0;
              color: #ffffff;
               border-radius: 0;
            -webkit-transition: border-color .25s ease, box-shadow .25s   ease;
             transition: border-color .25s ease, box-shadow .25s ease;
             }
              input:focus, textarea:focus {
             outline: 0;
              border-color: #1ab188;
                 }

                 textarea {
                 border: 2px solid #a0b3b0;
                resize: vertical;
                 } 

             .field-wrap {
              position: relative;
                margin-bottom: 40px;
                  }

                .top-row:after {
                 content: "";
                    display: table;
                   clear: both;
                     }
              .top-row > div {
                  float: left;
                  width: 48%;
                    margin-right: 4%;
                   }
                 .top-row > div:last-child {
                   margin: 0;
                   }

                    .button {
                   border: 0;
                      outline: none;
                 border-radius: 0;
               padding: 15px 0;
                  font-size: 2rem;
                 font-weight: 600;
                  text-transform: uppercase;
                letter-spacing: .1em;
                background: #1ab188;
                  color: #ffffff;
                 -webkit-transition: all 0.5s ease;
                transition: all 0.5s ease;
                 -webkit-appearance: none;
                    }
                .button:hover, .button:focus {
               background: #179b77;
               }

              .button-block {
              display: block;

                width: 100%; 
                }

                .forgot {
                   margin-top: -20px;
                  text-align: right;
                    }

Here is my javascript and troubling part :

     $('.form').find('input, textarea').on('keyup blur focus', function (e)  { 

    var $this = $(this),
    label = $this.prev('label');

      if (e.type === 'keyup') {
        if ($this.val() === '') {
      label.removeClass('active highlight');
     } else {
      label.addClass('active highlight');
    }
      } else if (e.type === 'blur') {
     if( $this.val() === '' ) {
        label.removeClass('active highlight'); 
        } else {
        label.removeClass('highlight');   
        }   
         } else if (e.type === 'focus') {

          if( $this.val() === '' ) {
        label.removeClass('highlight'); 
        } 
         else if( $this.val() !== '' ) {
        label.addClass('highlight');
        }
         }

        });

        $('.tab a').on('click', function (e) {

         e.preventDefault();

         $(this).parent().addClass('active');
         $(this).parent().siblings().removeClass('active');

           target = $(this).attr('href');

             $('.tab-content > div').not(target).hide();

              $(target).fadeIn(600);

              });

You are closing the <button> elements two times. <button type="submit" class="button button-block" />Get Started</button> delete the first /. You have it in both of the buttons. — Jaqen H'ghar
– Jaqen H'ghar, Commented Jun 26, 2016 at 15:04
You can validate my answer if it solved your problem by click on the green tic below the votes counter. Thank you. ; ) — JazZ
– JazZ, Commented Jun 26, 2016 at 15:17
@AdrienLeber I have upvoted your answer, there should be a widget popping up for people with <10Points, which shows where to accept answers :D — Legends
– Legends, Commented Jun 26, 2016 at 15:21

JazZ · Accepted Answer · 2016-06-26 15:05:40Z

3

in your html, you have a typo on your button's tags (<button class="button button-block"/>) but button's tag does not need to be closed like an input.

After, make sure you're loading the right JS library.

Your code is working fine then :

Here is a fiddle of your code -> https://jsfiddle.net/whL6v09y/

Hope it helps.

answered Jun 26, 2016 at 15:05

JazZ

4,5792 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

i cannot switch tabs using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related