CODEWITHSUNDEEP
htmlcsstwitter-bootstraptabstoggle
j_99
j_99

Reputation: 1

My toggle tab using bootstrap is not working

My toggle tabs are not working even though I got the code off of the internet 

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <link href="register.css" rel="stylesheet">
</head>

<body>
<div class="container register">
            <div class="row">
                <div class="col-md-9 register-right">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item active">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust">Customer</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest">Restaurant</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="cust" role="tabpanel">
                            <h3 class="register-heading">Registration for customers</h3>
                            <div class="row register-form">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="First Name *" value="" />
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Last Name *" value="" />
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" placeholder="Password *" value="" />
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control"  placeholder="Confirm Password *" value="" />
                                    </div>
                                    <div class="form-group">
                                        <div class="maxl">
                                            <label class="radio inline"> 
                                                <input type="radio" name="gender" value="male" checked>
                                                <span> Male </span> 
                                            </label>
                                            <label class="radio inline"> 
                                                <input type="radio" name="gender" value="female">
                                                <span>Female </span> 
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="email" class="form-control" placeholder="Your Email *" value="" />
                                    </div>
                                    <div class="form-group">
                                        <input type="text" minlength="10" maxlength="10" name="txtEmpPhone" class="form-control" placeholder="Your Phone *" value="" />
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control">
                                            <option class="hidden"  selected disabled>Please select meal your option</option>
                                            <option>Vegetarian</option>
                                            <option>Non Vegetarian</option>
                                        </select>
                                    </div>
                                    <input type="submit" class="btnRegister"  value="Register"/>
                                </div>
                            </div>
                        </div>


        <div class="tab-pane fade" id="rest" role="tabpanel">
          <h3 class="register-heading">Register your restaurant</h3>
          <div class="row register-form">
            <div class="col-md-6">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
              </div>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Address *" value="" />
              </div>
              <div class="form-group">
                <input type="email" class="form-control" placeholder="Email *" value="" />
              </div>
              <div class="form-group">
                <input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <input type="password" class="form-control" placeholder="Password *" value="" />
              </div>
              <div class="form-group">
                <input type="password" class="form-control" placeholder="Confirm Password *" value="" />
              </div>
              <input type="submit" class="btnRegister" value="Register" />
            </div>

The first tab is showing by default but I'm not able to switch to the other one. I went to the developers tools section and there weren't any errors.

I am using bootstrap v4 by the way. I have tried changing the position of the links, as someone recommeded in a different question but it didn't work for me.

Upvotes: 0

Views: 292

Answers (1)

jaydeep patel
jaydeep patel

Reputation: 917

I'm not sure what is the problem with your code, But when i customize in my code then it was worked for me, Please review my code and let me know if you have any question.

Hope it will work for you.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item active">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust" role="tab" >
        Customer
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest" role="tab">
        Restaurant
      </a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="cust" class="tab-pane in active">
      <h3>Register your customer</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="rest" class="tab-pane fade">
      <h3  class="register-heading">Register your restaurant</h3>
      <div class="row register-form">
        <div class="col-md-6">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Address *" value="" />
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email *" value="" />
          </div>
          <div class="form-group">
            <input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password *" value="" />
          </div>
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Confirm Password *" value="" />
          </div>
          <input type="submit" class="btnRegister"  value="Register"/>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions