I have a multi-step form and i wanted to add a button at the bottom of the page so the user can click next instead of clicking on the tabs at the top.
The button works however, the tab's background color does not change when i click on next.
<div class="right-col">
<div class="profile-content"
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active">
Customer Info
</li>
<li>
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
<script>
$("#next").click(function(){
$("#customer-tab").removeClass("active");
$("#leads-tab").addClass("active");
$("#leads-tab .theme-default .nav-tabs .a").css("background", "red");
});
</script>
</div>
BEFORE
AFTER
Here's the CSS when i inspect element
element.style {
}
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
You have to set id on li tag and give its color.
$(document).ready(function(){
$("#next").click(function(){
$("#licustomer-tab").removeClass("active");
$("#lileads-tab").addClass("active");
$("#profile-tabs .active a").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
</style>
<div class="right-col">
<div class="profile-content">
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active" id="licustomer-tab">
Customer Info
</li>
<li id="lileads-tab">
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
</div>
try this script
var $tabs = $('.tabbable li');
$('#nexttab').on('click', function() {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
$("#test").css("background-color", "red");
});
$('#test1').on('click', function() {
$("#test").css("background-color", "white");
});
<form class="form-horizontal" action='/products/add/' method='post'>
<fieldset>
<div class="tabbable">
<ul class="nav nav-tabs" id="tab_bar">
<li class="active">Product</li>
<li>Offer</li>
</ul>
<div class="tab-content">
<!-- TAB 1 -->
<div class="tab-pane active" id="tab1">
<div class="control-group">
<label class="control-label" for="id_title">Title</label>
<div class="controls">
<input type="text" name="title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_manufacturer">Manufacturer</label>
<div class="controls">
<input type="text" name="manufacturer">
<span class="help-inline">
</div>
<div class="btn-group">
<button class="btn" id="nexttab" type="button">Next</button>
</div>
</div>
</div>
<!-- TAB 2 -->
<div class="tab-pane" id="tab2">
<div class="control-group">
<label class="control-label" for="id_condition">Condition</label>
<div class="controls">
<input type="text" name="condition">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_condition_note">Condition Note</label>
<div class="controls">
<input type="text" name="condition_note">
</div>
</div>
</div>
</div>
<hr class="border-line"> <!-- STYLED IN FORMS.CSS -->
</fieldset>
</form>
working fiddle click here
Related
I have a form with multiple tabs. Each tab has various items (textboxes, radio buttons, drop down boxes). I need the content to be saved after 15 seconds idle or when the user clicks on submit button all tabs content will save and in mysqli different tables can store information.
If any suggestions please write sample code for save the information with different tables also
<form>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Material Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#quote" data-toggle="tab" aria-expanded="true" class="nav-link active">
Quotes
</a>
</li>
<li class="nav-item">
<a href="#purchase" data-toggle="tab" aria-expanded="false" class="nav-link">
Purchases
</a>
</li>
<li class="nav-item">
<a href="#usage" data-toggle="tab" aria-expanded="false" class="nav-link">
Usage
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="quote">
<i class="mdi mdi-plus"><button type="button" class='addmore'>Add More</button></i>
<form id='students' method='post' name='students'>
<table border="1" cellspacing="0" class="table-responsive">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
<th>S.No</th>
<th>Q.No</th>
<th>Item Name</th>
<th>Categories</th>
<th>Brand</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
<th>Quote Pic</th>
<th>Others</th>
</tr>
<tr>
<td><input type='checkbox' class='case' /></td>
<td><span id='snum'>1</span></td>
<td><span id='qnum'>1</span></td>
<td><input type='text' id='item_name' name='item_name[]' /></td>
<td><input type='text' id='categories' name='categories[]' /></td>
<td><input type='text' id='brand' name='brand[]' /></td>
<td width="10%"><input type='text' id='qty' name='qty[]' /> </td>
<td width="10%"><input type='text' id='rate' name='rate[]' /></td>
<td width="10%"><input type='text' id='amount' name='amount[]' /> </td>
<td width="10%"><input type='text' id='qpic' name='qpic[]' /> </td>
<td width="10%"><input type='text' id='others' name='others[]' /> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<p>
</div>
<!--Quotes Div Close-->
<div class="tab-pane fade" id="purchase">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Q.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Itemname</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-5" class="control-label">Categories</label>
<input type="text" class="form-control" id="field-5" placeholder="categories">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Brand</label>
<input type="text" name="country" id="autocomplete-ajax" class="form-control" autocomplete="off">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-5" class="control-label">Rate</label>
<input type="text" class="form-control" id="field-5" placeholder="1234.00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-6" class="control-label">Amount</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Others</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
</div>
<!-- row-->
</div>
<!-- Purchase Div Close-->
<div class="tab-pane fade" id="usage">
<div class="row">
<!-- Inline Form -->
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"></h4>
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S. No. </label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-5" class="control-label">Item Name </label>
<input type="text" class="form-control" id="field-5" placeholder="Item Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
<!--row-->
</div>
<!--end card box-->
</div>
<!--end col-md-12-->
</div>
<!-- end row / End Inline form-->
</div>
<!-- Usage Div-->
</div>
<!-- Tab Content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Labour Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#inhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<!-- <li class="nav-item">
<a href="#scontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li> -->
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="inhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Category Of Labour</label>
<input type="text" class="form-control" id="field-4" placeholder="Mastrey">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Per Head Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Total Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
</div><!--row close-->
</div><!--card box close-->
</div><!--div md 12 close-->
</div><!-- end row / End Inline form-->
</div><!--in house tab close-->
</div><!--tab content-->
</div><!-- Close card-box -->
</div> <!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Work In Progress</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#winhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<li class="nav-item">
<a href="#wsubcontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="winhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
</div>
</div>
</div>
</div> <!-- end row / End Inline form-->
</div><!--winhouse close-->
<div class="tab-pane fade" id="wsubcontract">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="field-6" class="control-label">Notes </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-6" class="control-label">Upload Pics</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row / End Inline form-->
</div><!--wsubconant-->
</div><!--tab content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
</form>
here single form i have 3 divs and each div i have two or more tabs how can i store the all information with different databases
for example in material estimation div i have 3 tabs
1. Quotes
2. Purchase
3. Usage
in quotes tabs add new rows click add another row like no restrictions is there like purchases also
quotes data can store quotes table and purchase data can store purchase table usage data store in usage table
how i have only for single submit button for hole form and edit also add like
how is it is possible to make that one
if possible please write a code snippet and save to db
i have worked also ajax form not successfully so please if any one make code write for u s thank u
you can write in form action page look like this and also each and every field you can assign the name/id first then write form action page
if example i have taken one item
if(!empty($catlabours)) {
//your code
}
I have an index like this:
<body>
<div id="page-container">
<div id="header">
<div class="main">
<div class="content">
<div id="website-link"></div>
<div id="cart">
<div class="price">120,00 €</div>
<div class="cart-icon"><img src="img/cart.png" /></div>
<div class="items">0</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div id="bradcrumbs">3D TOOL > Upload > <span class="active"> Customize</span></div>
<div id="menu">
<ul>
<li>Help</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content">
<div class="block-container" id="block-container">
<div id="tools">
<form action="#" enctype="multipart/form-data" method="post" id="uploader">
<input type="file" name="fileUpload" id="fileUpload" style="display: none" multiple accept=".stl,.obj,.stp,.step">
<label for="fileUpload">
<div id="addmore" style="cursor: pointer"></div>
</label>
</form>
<div id="checkout">Checkout</div>
</div>
</div>
</div>
</body>
</html>
using a jquery function i prepend this code inside block-container div:
<div id='upload-container-<?php echo $i;?>' class='upload-container'>
<div class="form-data">
<div class="col col1">
<div class="col-content"><img src="img/square.jpg" /></div>
<div class="col-info">Nome del file</div>
</div>
<div class="col col2">
<div class="col-content">
<label class="label">MATERIALI</label>
<div class="select-style">
<?php
echo"<select name='materiali' class='materiali' autofocus tabindex='20' >";
foreach($oxmL->Materials->Material as $material)
{
echo "<option value=$material->MaterialID>$material->Name</option>";
}
echo"</select>";
?>
</div>
<label class="label">FINITURA</label>
<div id="selectmateriali2"class="select-style">
<?php
$id=$oxmL->Materials->Material['0']->MaterialID;
echo"<select name='materiali2' class='materiali2' id='materiali2' autofocus tabindex='20'>";
foreach($oxmL->Materials->Material as $material)
{
if($material->MaterialID==$id)
{
foreach($material->Finishes->Finish as $finish)
{
echo "<option value=$finish->FinishID>$finish->Name</option>";
}
}
}
echo"</select>";
?>
</div>
<label class="label">QUANTITA</label>
<input name="quantity" id="quantity" type="number" class="quantita" min="1" step="1" value="1">
</div>
<div class="col-info"></div>
</div>
<div class="col col3">
<div class="col-content">
<div class="size-form">
<div class="label">Resize</div>
<input class="size" type="text" value="100"/>
</div>
<div class="size-text">Change the size of your object in percent</div>
<div class="size-info">
<div class ="box-title">
<div class="title-icon"><img src="img/3dpr-form-xyz-cube.png" /></div>
</div>
<div class="axis-area">
<div class="axis axis-x">X: <label for="x" class="labelx">2</label></div>
<div class="axis axis-y">Y: <label for="y" class="labely">3</label></div>
<div class="axis axis-z">Z: <label for="z" class="labelz">4</label></div>
</div>
</div>
</div>
<div class="col-info">
<div class="icons">
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price">450.20 €</div>
</div>
</div>
</div>
<div class="item-info">
<div class="filename col col1"> <label for="filename">filename.ciops</label></div>
<div class="icons col col2">
<div class="button button-zoom"></div>
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price col col3"> <label for="price" class="labelprice">450.20</label> €</div>
</div>
</div>
I want to had a click listener to the div with the "button button-duplicate" class, i made it like this:
$('#block-container').on('input','.quantita',quantityChanged);
$('#block-container').on('input','.size',scaleChanged);
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);
but it doesn't works, instead every other listener in the page works using #block-container as static element. What can i do? Any suggestion? Thank you
The problem with your code is your selector.
You have:
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
And it should be:
$('#block-container').on('click','.button.button-delete', function(){
alert("ok");
//some code
});
When you want to select an element by two or more classes, you have to write the class selectors all together, without white spaces between them, in this way '.class1.class2.class3'
I'm simply trying to have JQuery show/hide a div. I've tried using Javascript instead and that still does not work. I've tested to make sure that everywhere in my JS script is being reached. It just isn't applying and I don't know why. Thank you for any help you can give.
Javascript
$(document).ready(function() {
startup();
$('select').material_select();
$('ul.tabs').tabs();
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
function startup() {
$("#Assignments").hide();
$("#ClassView").hide();
}
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
function tabswitch(x) {
if (x == 1) {
$("#Calender").show();
$("#Assignments").hide();
$("#ClassView").hide();
} else if (x == 2) {
$("#Calender").hide();
$("#Assignments").show();
$("#ClassView").hide();
} else if (x == 3) {
$("#Calender").hide();
$("#Assignments").hide();
$("#ClassView").show();
}
}
CSS
#sidebar p {
text-align: center;
color: white;
font-size: 18px;
}
#sideInterior p {
color: black;
}
.tabs a:link {
font-family: monospace;
color: white
}
.tabs a:hover {
color: gray;
}
.tabs a:visited {
color: white;
}
.tabs a:active {
color: white;
}
body {
background-color: #bdbdbd;
}
.Accordion {
background-color: white;
}
li {
margin-left: 5px;
margin-right: 5px;
}
HTML
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="newStyle.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.js"></script>
<script type="text/javascript" src="JS.js"></script>
<meta charset="utf8">
<title>Scheduling_Main</title>
</head>
<nav>
<div class="nav-wrapper blue darken-4">
Scheduling Project
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Profile
</li>
<li>Settings
</li>
<li>Help
</li>
</ul>
</div>
</nav>
<body>
<div id="2ndNav" class="row nav-wrapper blue">
<div class="col s3 blue" id="sidebar">
<p>Add to your schedule
<p>
</div>
<div class="col s9" id="tabSpace">
<ul class="tabs blue">
<li class="tab col s3">Calender
</li>
<li class="tab col s3">Assignments
</li>
<li class="tab col s3">Class View
</li>
<div class="indicator white" style="z-index:1"></div>
</ul>
</div>
</div>
<div class="row">
<!--start of sidebar-->
<div class="col s3">
<ul class="collapsible popout" data-collapsible="accordion">
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add semester</div>
<!--start of "add semester"-->
<div class="collapsible-body">
<div class="input-field">
<input id="Semester_Title" type="text" class="validate">
<label for="Semester_Title">Semester Title</label>
</div>
<div class="startDate">
<label for="Semester_Start">Start Date</label>
<input id="Semester_Start" type="date" class="datepicker">
</div>
<div class="endDate">
<label for="Semester_End">End Date</label>
<input id="Semester_End" type="date" class="datepicker">
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add course</div>
<!--start of "add course"-->
<div class="collapsible-body">
<div class="input-field">
<select>
<!--list of semesters go here-->
<option value="" disabled selected>Choose the semester</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<input id="Course_ID" type="text" class="validate">
<label for="Course_ID">Course_ID</label>
</div>
<div class="input-field">
<input id="Course_Title" type="text" class="validate">
<label for="Course_Title">Course Title</label>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add assignment</div>
<!--start of "add assignment"-->
<div class="collapsible-body">
<div class="input-field">
<select class>
<!--list of classes go here-->
<option value="" disabled selected>Choose the class</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<input id="Assignment_Title" type="text" class="validate">
<label for="Assignment_Title">Assignment Title</label>
</div>
<div class="endDate">
<label for="Due_Date">Due Date</label>
<input id="Due_Date" type="date" class="datepicker">
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
</ul>
</div>
<div>
<!--tab stuff goes here-->
<div id="#Calender" class="col s9">
<p>Calender Test</p>
</div>
<div id="#Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="#ClassView" class="col s9">
<p>Class Test</p>
</div>
</div>
</div>
</body>
</html>
I've changed your code. Please see if this is what you want:
[enter link description here][1]
Just change id name.
[1]: https://jsfiddle.net/tyqsa12u/enter code here
Your HTML elements should not have # in front of their ids. Its just used in CSS selector to refer to them.
Replace
<div id="#Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="#ClassView" class="col s9">
<p>Class Test</p>
</div>
with
<div id="Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="ClassView" class="col s9">
<p>Class Test</p>
</div>
and it should work.
I am having issues with the Javascript that supports only 2 panel toggle. When adding a 3rd panel the Javascript fails to displays the correct panel. It could be a simple panel ID issue, but I don't seem to be able to set the ID for toggling with the radio buttons.
Here's the JSFiddle containing a 2 panel and a 3 panel example: http://jsfiddle.net/9z8735h3/5/
Here's the code:
<H4>2 Tab Version Work Great!</H4>
<br />
<div class="container">
<ul class="nav nav-tabs" id="Languages">
<li class="active"><a data-target="#dotNet" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet">
<!--NAV TAB CONTENT SELECTION-->
<form name="NetVersion">
<input type="radio" id="Net40" name="thing" value="valuable" data-id="Net40" checked="checked" />
<label for="Net40">4.0</label>
|
<input type="radio" id="Net56" name="thing" value="valuable" data-id="Net56" />
<label for="Net56">5.6</label>
</form>
<hr />
<!--NAV TAB CONTENT SELECTION-->
<div id="Net40View" class="col-lg-12 active">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div id="Net56View" class="col-lg-12 none">
<div class="col-md-6 border-green active">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP">
<h2>Some content here</h2>
</div>
</div>
</div>
<br />
<hr />
<H4>But this 3 Tab Version Breakdows</H4>
<p>I would to be able to add 3 or more radio buttons and maintain the same experience as compared to the 2 tabs above.
</p>
<br />
<div class="container">
<ul class="nav nav-tabs" id="Languages">
<li class="active"><a data-target="#dotNet" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet">
<!--NAV TAB CONTENT SELECTION-->
<form name="NetVersion">
<input type="radio" id="Net40" name="thing" value="valuable" data-id="Net40" checked="checked" />
<label for="Net40">4.0</label>
|
<input type="radio" id="Net56" name="thing" value="valuable" data-id="Net56" />
<label for="Net56">5.6</label>
|
<input type="radio" id="Net6" name="thing" value="valuable" data-id="Net6" />
<label for="Net6">6.0</label>
</form>
<hr />
<!--NAV TAB CONTENT SELECTION-->
<div id="Net40View" class="col-lg-12 active">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div id="Net56View" class="col-lg-12 none">
<div class="col-md-6 border-green active">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
<div id="Net6View" class="col-lg-12 none">
<div class="col-md-6 border-green active">.NET 6.0 Left</div>
<div class="col-md-6 border-green">.NET 6.0 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP">
<h2>Some content here</h2>
</div>
</div>
</div>
I would appreciate any help with this issue as I am a newbie in Javascript. Thanks in advance for any help!
Part of it is an element id issue. Though some would argue differently, all element id names should be unique, or the HTML is invalid. The current code contains multiple elements with the same id name. The second issue is, though the .toggle() call works when you have two elements, when you have three elements, you are going to end up toggling two of the elements to visible, when they are hidden, and one that is currently visible to hidden; hence, you need to be more specific when setting the elements as visible or hidden. Tweaked your current example to one that works with both 2 and 3 radio sets:
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function (){
$('input[name=version-two-tab]:radio').change(function(event) {
$('#Net40View-two-tab').toggle();
$('#Net56View-two-tab').toggle();
});
$('input[name=version-three-tab]:radio').change(function(event) {
console.log(event);
if ($(this).data('id') === 'Net40-three-tab') {
$('#Net40View-three-tab').show();
$('#Net56View-three-tab').hide();
$('#Net6View-three-tab').hide();
}
if ($(this).data('id') === 'Net56-three-tab') {
$('#Net40View-three-tab').hide();
$('#Net56View-three-tab').show();
$('#Net6View-three-tab').hide();
}
if ($(this).data('id') === 'Net6-three-tab') {
$('#Net40View-three-tab').hide();
$('#Net56View-three-tab').hide();
$('#Net6View-three-tab').show();
}
});
});
</script>
<style>
.none {
display: none;
}
.border-red {
border: solid 1px red;
border-radius: 5px;
padding: 5px;
}
.border-blue {
border: solid 1px blue;
border-radius: 5px;
padding: 5px;
}
.border-green {
border: solid 1px green;
border-radius: 5px;
padding: 5px;
}
</style>
<title>Toggle Panels Failure Using Radio Buttons</title>
</head>
<body>
<h4>2 Radio Version</h4>
<ul class="nav nav-tabs" id="Languages-two-tab">
<li class="active"><a data-target="#dotNet-two-tab" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP-two-tab" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet-two-tab">
<form>
<input checked data-id="Net40-two-tab" id="Net40-two-tab" name="version-two-tab" type="radio">
<label for="Net40-two-tab">4.0</label> |
<input data-id="Net56-two-tab" id="Net56-two-tab" name="version-two-tab" type="radio">
<label for="Net56-two-tab">5.6</label>
</form>
<hr>
<div class="col-lg-12 active" id="Net40View-two-tab">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div class="col-lg-12 none" id="Net56View-two-tab">
<div class="col-md-6 border-green">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP-two-tab">
<h2>Some content here</h2>
</div>
</div>
<hr>
<h4>3 Radio Version</h4>
<ul class="nav nav-tabs" id="Languages-three-tab">
<li class="active"><a data-target="#dotNet-three-tab" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP-three-tab" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet-three-tab">
<form>
<input checked data-id="Net40-three-tab" id="Net40-three-tab" name="version-three-tab" type="radio">
<label for="Net40-three-tab">4.0</label> |
<input data-id="Net56-three-tab" id="Net56-three-tab" name="version-three-tab" type="radio">
<label for="Net56-three-tab">5.6</label> |
<input data-id="Net6-three-tab" id="Net6-three-tab" name="version-three-tab" type="radio">
<label for="Net6-three-tab">6.0</label>
</form>
<hr>
<div class="col-lg-12 active" id="Net40View-three-tab">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div id="Net56View-three-tab" class="col-lg-12 none">
<div class="col-md-6 border-green">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
<div id="Net6View-three-tab" class="col-lg-12 none">
<div class="col-md-6 border-green">.NET 6.0 Left</div>
<div class="col-md-6 border-green">.NET 6.0 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP-three-tab">
<h2>Some content here</h2>
</div>
</div>
<hr>
</body>
</html>
I want to have a form for each tab, but the form fields are completely misaligned:
http://jsfiddle.net/r2guf086/
As far as I can tell, I'm following Bootstrap's example code quite closely. What is wrong here?
My code:
<h2 id="ingredients"><strong>Ingredients</strong></h2>
<hr />
<div class="row">
<!-- Nav tabs -->
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active">#1</li>
<li>#2</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ingredients-1">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">xxx</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane" id="ingredients-2">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">yyy</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
First one has the following CSS link:
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
Second one has this CSS:
<link class="cssdeck" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
I would not mix and match CDNs for the same library, and only use those which you trust. Change the CSS in the second example to this and it will work
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
Before: http://jsfiddle.net/awkbmn0L/
After: http://jsfiddle.net/1eznowf7/
(I've never heard of liveweave, and it was doing some weird display things to the code, so I went with jsfiddle for examples)