Jquery function for hiding/unhiding div isn't working properly

Question

0.00/5 (No votes)

See more:

i've two forms one for signin/signup and other for hospital/doctor finder. Both forms are flat UI forms i.e first forms contains 3 li signin,signup & reset password together in a single form. The problem that i'm facing is when i click on any li among above mentioned li's, the hospital/doctor finder form which is exactly below gets blank n vice versa. here's the jquery function for hiding/unhiding divs inside the form. function is unambiguous but i'm unable to figure out, why isn't working.
Need urgent help. thanks in advance.

Jquery function:

JavaScript

$(function () {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';

    $('#tabs1').on('click', 'li a', function (e) {
        e.preventDefault();
        var $tab = $(this),
             href = $tab.attr('href');

        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);

        $('.show')
           .removeClass(SHOW_CLASS)
           .addClass(HIDE_CLASS)
           .hide();

        $(href)
          .removeClass(HIDE_CLASS)
          .addClass(SHOW_CLASS)
          .hide()
        .fadeIn(550);
    });
});

$(function () {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';

    $('#tabs2').on('click', 'li a', function (e) {
        e.preventDefault();
        var $tab = $(this),
             href = $tab.attr('href');

        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);

        $('.show')
           .removeClass(SHOW_CLASS)
           .addClass(HIDE_CLASS)
           .hide();

        $(href)
          .removeClass(HIDE_CLASS)
          .addClass(SHOW_CLASS)
          .hide()
        .fadeIn(550);
    });
});

Posted 28-Jan-15 9:56am

Member 9954549

Updated 28-Jan-15 16:09pm

Sergey Alexandrovich Kryukov

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 28-Jan-15 22:07pm

Why two separate $(function() {/*...*/})? And they are almost the same. It really does not make sense.
(I don't say it's a cause of your problem, I just say it's bad, no reuse no nothing.)

Other than that, the code looks fine to me, well, almost. The behavior is not defined by Javascript along, its a combination of it with HTML and CSS, which you did not show.

—SA

Member 9954549 29-Jan-15 16:49pm

I know this isn't a good practice but as i've two forms with same layout n javascript.
here's the link from where i copied form and its css and javascript.
http://cssdeck.com/labs/flat-ui-login-form

2 solutions

Solution 1

Hi, please share your HTML part as well so that we can help you better.
You are doing the events on class that might be a reason of problem. Use the id's of controls and check, I hope your problem get resolved.

Posted 29-Jan-15 0:21am

Nilendra Nath

Comments

Member 9954549 29-Jan-15 16:50pm

here's the link from where i copied form and its css and javascript.
http://cssdeck.com/labs/flat-ui-login-form

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nilendra Nath · Accepted Answer · 2015-01-30T02:36:00

As you said you need two similar forms but want to handle differently, here is the code I have updated with two forms, you can handle both individually. I have done minor changes in jquery, html and css. I hope it will help you.

XML

<div class="container">
        <div class="flat-form">
            <ul class="tabs" id="tabs1">
                <li>
                    <a href="#login" class="active">Login</a>
                </li>
                <li>
                    <a href="#register">Register</a>
                </li>
                <li>
                    <a href="#reset" >Reset Password</a>
                </li>
            </ul>
            <div id="login" class="form-action show1">
                <h1>Login on webapp</h1>
                <p>
                    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    Maecenas sed diam eget risus varius bladit sit amet non
                </p>
                <form>
                    <ul>
                        <li>
                            <input type="text" placeholder="Username" />
                        </li>
                        <li>
                            <input type="password" placeholder="Password" />
                        </li>
                        <li>
                            <input type="submit" value="Login" class="button" />
                        </li>
                    </ul>
                </form>
            </div>
            <!--/#login.form-action-->
            <div id="register" class="form-action hide1">
                <h1>Register</h1>
                <p>
                    You should totally sign up for our super awesome service.
                    It's what all the cool kids are doing nowadays.
                </p>
                <form>
                    <ul>
                        <li>
                            <input type="text" placeholder="Username" />
                        </li>
                        <li>
                            <input type="password" placeholder="Password" />
                        </li>
                        <li>
                            <input type="submit" value="Sign Up" class="button" />
                        </li>
                    </ul>
                </form>
            </div>
            <!--/#register.form-action-->
           <div id="reset" class="form-action hide1">
                <h1>Reset Password</h1>
                <p>
                    To reset your password enter your email and your birthday
                    and we'll send you a link to reset your password.
                </p>
                <form>
                    <ul>
                        <li>
                            <input type="text" placeholder="Email" />
                        </li>
                        <li>
                            <input type="text" placeholder="Birthday" />
                        </li>
                        <li>
                            <input type="submit" value="Send" class="button" />
                        </li>
                    </ul>
                </form>
            </div>
            <!--/#register.form-action-->
        </div>
    </div>
<!--............................................-->
 <div class="container">
        <div class="flat-form">
            <ul class="tabs" id="tabs2">
                <li>
                    <a href="#login1" class="active">Login</a>
                </li>
                <li>
                    <a href="#register1">Register</a>
                </li>
                <li>
                    <a href="#reset1">Reset Password</a>
                </li>
            </ul>
            <div id="login1" class="form-action show2">
                <h1>Login on webapp</h1>
                <p>
                    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    Maecenas sed diam eget risus varius bladit sit amet non
                </p>
                <form>
                    <ul>
                        <li>
                            <input type="text" placeholder="Username" />
                        </li>
                        <li>
                            <input type="password" placeholder="Password" />
                        </li>
                        <li>
                            <input type="submit" value="Login" class="button" />
                        </li>
                    </ul>
                </form>
            </div>
            <!--/#login.form-action-->
            <div id="register1" class="form-action hide2">
                <h1>Register</h1>
                <p>
                    You should totally sign up for our super awesome service.
                    It's what all the cool kids are doing nowadays.
                </p>
                <form>
                    <ul>
                        <li>
                            <input type="text" placeholder="Username" />
                        </li>
                        <li>
                            <input type="password" placeholder="Password" />
                        </li>
                        <li>
                            <input type="submit" value="Sign Up" class="button" />
                        </li>
                    </ul>
                </form>
            </div>

        </div>
    </div>

$(function () {
    // constants
    var SHOW_CLASS = 'show1',
        HIDE_CLASS = 'hide1',
        ACTIVE_CLASS = 'active';
 
    $('#tabs1').on('click', 'li a', function (e) {
        e.preventDefault();
        
         var $tab = $(this),
             href = $tab.attr('href');
 
        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);
 
        $('.show1')
           .removeClass(SHOW_CLASS)
           .addClass(HIDE_CLASS)
           .hide();
 
        $(href)
          .removeClass(HIDE_CLASS)
          .addClass(SHOW_CLASS)
          .hide()
        .fadeIn(550);
    });
});
 
$(function () {
    // constants
    var SHOW_CLASS = 'show2',
        HIDE_CLASS = 'hide2',
        ACTIVE_CLASS = 'active';
 
    $('#tabs2').on('click', 'li a', function (e) {
        e.preventDefault();
        var $tab = $(this),
             href = $tab.attr('href');
 
        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);
 
        $('.show2')
           .removeClass(SHOW_CLASS)
           .addClass(HIDE_CLASS)
           .hide();
 
        $(href)
          .removeClass(HIDE_CLASS)
          .addClass(SHOW_CLASS)
          .hide()
        .fadeIn(550);
    });
});

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);

body {
  background: #1a1a1a;
  color: white;
  font-family: 'Roboto';
}
.flat-form {
  background: #e74c3c;
  margin: 25px auto;
  width: 390px;
  height: 340px;
  position: relative;
  font-family: 'Roboto';
}
.tabs {
  background: #c0392b;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px;
}
.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
.tabs a {
  background: #c0392b;
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/

}
.tabs li:last-child a {
  border-right: none;
  width: 174px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
.tabs a.active {
  background: #e74c3c;
  border-right: none;
  -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.form-action {
  padding: 0 20px;
  position: relative;
}

.form-action h1 {
  font-size: 42px;
  padding-bottom: 10px;
}
.form-action p {
  font-size: 12px;
  padding-bottom: 10px;
  line-height: 25px;
}
form {
  padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
  font-family: 'Roboto';
}

form input[type=text],
form input[type=password] {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #e74c3c;
  outline: none;
}

.dark-box {
  background: #5e0400;
  box-shadow: 1px 3px 3px #3d0100 inset;
  height: 40px;
  width: 50px;
}
.form-action .dark-box.bottom {
  position: absolute;
  right: 0;
  bottom: -24px;
}
.tabs + .dark-box.top {
  position: absolute;
  right: 0;
  top: 0px;
}
.show1 {
  display: block;
}
.hide1 {
  display: none;
}
.show2 {
  display: block;
}
.hide2 {
  display: none;
}
.button {
    border: none;
    display: block;
    background: #136899;
    height: 40px;
    width: 80px;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    /*box-shadow: 0px 3px 1px #2075aa;*/
    -webkit-transition: all 0.15s linear;
      -moz-transition: all 0.15s linear;
      transition: all 0.15s linear;
}

.button:hover {
  background: #1e75aa;
  /*box-shadow: 0 3px 1px #237bb2;*/
}

.button:active {
  background: #136899;
  /*box-shadow: 0 3px 1px #0f608c;*/
}

::-webkit-input-placeholder {
  color: #e74c3c;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #e74c3c;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #e74c3c;
}
:-ms-input-placeholder {
  color: #e74c3c;
}

I have used all codes from the link you have provided. If you need any clarification or updation, let me know.