I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}
You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed
If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>
Related
The first delete produced works fine when clicked on "add more" but del element produced after that deletes everything present on the page. Can someone please help me, maybe something is wrong with ele, I don't have much experience with JS
Steps to reproduce :
Click on add more and then the next add more which got created on click the previous add more.
click on the last del
It deletes everything rather than deleting that very DIV
$(function() {
$(".btn-copy").on('click', function() {
var ele = $(this).closest('.example-2').clone(true);
ele.find('input').val('')
if (ele.find('button').length<2) {
let btn = document.createElement("button");
btn.innerHTML = "Delete";
btn.onclick = (e) => {
e.preventDefault()
ele.remove()
}
ele[0].appendChild(btn);
}
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The problem was in the use of .clone()
You where cloning the latest cloned element which forced you to create an if statement to prevent creating more than one delete button. But that also did not allow you to execute what was inside the if statement after a certain number of nodes cloned.
You also could not use the btn variable outside that if statement.
The solution is to clone always the first example-2element so we can jump the use of the if statement and allow the btn variable to be used freely.
I added an extra div #wrapper to use find('div').first() so the same example-2 element can be copied every time.
Snippet
$(function() {
$(".btn-copy").on('click', function() {
var ele = $('#wrapper').find('div').first().clone(true);
ele.find('input').val('');
let btn = document.createElement("button");
btn.innerHTML = "Delete";
ele[0].appendChild(btn);
btn.onclick = (e) => { ele.remove() };
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="example-2 form-group row" style="margin-top:15px">
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button" style="margin-top:30px">Submit</button>
</div>
</div>
</div>
Dropzone and Javascript isn't working on bootstrap Modal i'm calling Modal through ajax.Because i have hundreds of records i don't want to place Modal in foreach so i used ajax on button click controller method hits and return a new view and that view i'm calling and main view where modal will be displayed. Modal is working fine but i have used dropzone plugin which isn't working and even no other js code is working neither css.
MainView.blade.php
On button Click the following script hits
this the my main view where i am calling Bootstrap Modal
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.edit_product_model').click(function(){
var product_id = $(this).attr("id");
$.ajax({
url:"{{url('architecture-edit-product')}}/" + product_id ,
method:"post",
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{product_id:product_id},
success:function(data){
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
}
});
});
});
</script>
Controller
public function editArchitectureProductSave(Request $request, $id){
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="{{$products['0']->id}}">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="{{$products['0']->name}}">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="{{Request::segment(2)}}">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">{{$products['0']->description}}</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="{{$products['0']->leed_file_url}}">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code is working fine modal is calling but problem is only when modal from edit-product-Bootstrap-modal.blade.php is called through the script used in mainView.blade.php for Bootstrap Modal is not working
Check if you have disabled autoDiscvoer for dropzone.js on Dropzone.autoDiscover
if its false set its value as true (Dropzone.autoDiscover = true;).
If thats also not working try manually initializing the dropzone by attaching it to the model.
myDropDown = new Dropzone('#product_details', {<options>})
I had a similar problem with modals, where my datepicker.js input field wouldn't work when I click it, but id didn't show any errors. I did some digging, and apparently, modals don't properly load scripts defined in your view (or wherever). I managed to do this, by initializing the same script again, but with another name, in my app.js, something like this:
$(document).ready(function () {
$('.datepickerCustom').datepicker({
//datepicker logic
}).on('changeDate', function (e) {
$(this).parent().find('.datePickerInput').val(e);
});
});
After compiling my views again (webpack), date picker was working fine. There's also another solution. Seems like sometimes js scripts "hide" behind the modal, so you need to set their z-index the modal's z-index which is 1050. This could be done inside your modal view:
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
If this still doesn't work, there's actually one more solution, where you need to initiate the date picker on the Modal shown event, something like this:
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Hope that any of those solutions can solve your problem. Good luck.
I have a view where I am fetching database records in form of bootstrap card. In the each card I have checkboxes which are associated with a database column.
On checking the checkboxes and clicking of the save button I want to hide the card with that record in which I enter that value
How can I achieve this? I tried with the class name of the card but it is hiding all the cards.
$('.insert').click(function() {
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked').length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked').length,
NewLin: $('input[data-nlid=' + rId + ']:checked').length,
DpClean: $('input[data-dcid=' + rId + ']:checked').length
});
$('.Resbook').hide();
});
#model IEnumerable
<RoomTypeView>
<div class="row">
#foreach (var item in Model)
{
<div class="col-3">
<div class="card border rounded DropShadow Resbook">
<div class="card-body">
Room #Html.DisplayFor(modelItem => item.RoomNo)
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button><br />
#Html.DisplayFor(modelItem => item.GuestName)<br />
<div class="row">
<div class="col-7 text-center">
#if (item.Status.HasFlag(EnumHkStatus.Cleaning))
{
<input type="checkbox" data-Cleanid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Cleaning</label>
<br />
}
#if (item.Status.HasFlag(EnumHkStatus.InventoryCheck))
{
<input type="checkbox" data-InvChkid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Inventory Check</label>
}
</div>
<div class="col-5">
#if (item.NewLinen == null)
{
<input type="checkbox" data-nlid="#item.RoomId" class="form-check-input" />
<label>New Linen</label>
<br />
}
#if (item.DeepCleaning == null)
{
<input type="checkbox" data-dcid="#item.RoomId" class="form-check-input" />
<label>Deep Cleaning</label>
}
</div>
</div>
<div class="row">
<div class="col-8">
<div class="inventory my-1">
<textarea class="form-control breakage" placeholder="Enter Breakage Note" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default breakage" data-brid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="comments my-1">
<textarea class="form-control inventoryms" placeholder="Enter Inventory Missing" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default invmissing" data-invmid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
#Html.DisplayFor(modelItem => item.Comments)
</div>
</div>
</div>
}
</div>
This $('.Resbook').hide(); is hiding all the cards. How to overcome this? How can I can use that rId to hide that particular card?
it is hiding all the cards
You need to ensure only the related card is hidden. The .insert button is within a .card so you can find the .card it's within using .closest and then use relative finds.
var card = $(this).closest(".card");
$('input[data-invchkid=' + rId + ']:checked', card)
or
card.find('input[data-invchkid=' + rId + ']:checked')
As the .card is also .Resbook (<div class='card Resbook'>) you can use .Resbook instead of .card, eg:
var card = $(this).closest(".Resbook");
$(card).hide();
Giving:
$('.insert').click(function() {
var card = $(this).closest(".card");
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked', card).length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked', card).length,
NewLin: $('input[data-nlid=' + rId + ']:checked', card).length,
DpClean: $('input[data-dcid=' + rId + ']:checked', card).length
});
$(card).hide();
});
Example snippet showing use of .closest() using OPs structure:
$(".insert").click(function() {
$(this).closest(".card").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 1
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 2
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
In the case where the button is not inside the hierarchy of the card to be used, they can be linked together via their data-rid= values.
Add the .data-rid to the .card so that they match:
<div class='card' data-rid='#item.RoomId'/>
then match the two with
$("button").click(function() {
var rid = $(this).data("rid");
var card = $(".card[data-rid=" + rid + "]")
Example snippet:
$(".external-insert").click(function() {
var rid = $(this).data("rid")
var card = $(".card[data-rid=" + rid + "]")
card.hide();
$(this).fadeOut(); // also hide the button
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="1">
<div class="card-body">
Room 1
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="2">
<div class="card-body">
Room 2
</div>
</div>
</div>
</div>
<hr/>
<button type="button" class="btn btn-default insert external-insert" data-rid="1">Save 1</button>
<button type="button" class="btn btn-default insert external-insert" data-rid="2">Save 2</button>
I have an accordion that has a form inside. When a button inside each accordion is clicked, it retrieves title and query contents of the same accordion.
https://jsfiddle.net/rkdrfj4y/3/ this is a demonstration of what I am attempting to do.
The problem is that the first accordion always returns undefined form input value. All the other subsequent accordions return the expected values. I don't understand how this can happen because identical js code is used for each accordion.
HTML
<form>
<div class="form-group">
<label for="exampleTextarea">Global Templates</label>
<div class="panel-group" id="accordion-global">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="title-anchor" data-toggle="collapse"
data-parent="#accordion-global" href="#collapse-global-0">
title</a>
</h4>
</div>
<div id="collapse-global-0" class="panel-collapse collapse">
<div class="panel-body">
<form class="query-form">
<div class="form-group">
<label for="template-title">Template Title</label>
<input type="text" class="form-control template-title" name="template-title" value="title">
</div>
<div class="form-group">
<label for="template-query">Template Query</label>
<textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
</div>
</form>
<input class="query-id" type="hidden" value="_id">
<button class="btn btn-info apply-template-btn">Save
</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="title-anchor" data-toggle="collapse"
data-parent="#accordion-global" href="#collapse-global-1">
title</a>
</h4>
</div>
<div id="collapse-global-1" class="panel-collapse collapse">
<div class="panel-body">
<form class="query-form">
<div class="form-group">
<label for="template-title">Template Title</label>
<input type="text" class="form-control template-title" name="template-title" value="title">
</div>
<div class="form-group">
<label for="template-query">Template Query</label>
<textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
</div>
</form>
<input class="query-id" type="hidden" value="_id">
<button class="btn btn-info apply-template-btn">Save
</button>
</div>
</div>
</div>
</div>
</div>
</form>
JS
$('.apply-template-btn').click(function (e) {
e.preventDefault();
let id = $(this).siblings('.query-id').val();
let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();
console.log([id,title,query])
alert(title) //undefined for first accordion but works for all other subsequent accordions
$.post('/api/database/query_template/update', {id,title,query}, function (data) {
console.log(data)
})
});
Change the below existing lines:
let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();
to
let title = $(this).parent().find(".template-title").val();
let query = $(this).parent().find(".template-query").val();
I have the following snippets:
My HTML Page which uses 4 buttons to show/hide four divs, each will have their own content.
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
The problem is, only the fist button and div (addCustomer) works correctly. I have tried split methods but I would prefer to keep the single method. Any help is appreciated.
Use jQuery fully when you have it.
Although with your HTML and inline script this would work:
function show(target) {
$('.trigger').hide();
$("#"+ target).show();
}
As could this (but it would not work as a radio button more like a checkbox):
function show(target) {
$("#"+ target).toggle();
}
I strongly suggest you use unobtrusive code and move the script out of the HTML
$(function() {
$(".redButton").on("click",function() { // any button
$(".trigger").hide(); // hide the divs
$("#"+$(this).data("id")).show(); // show the relevant div
});
});
.trigger { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button type="button" class="redButton" data-id="addCustomer">Add Customer</button>
<button type="button" class="redButton" data-id="searchCustomer">Search Customers</button>
<button type="button" class="redButton" data-id="addItem">Add Item</button>
<button type="button" class="redButton" data-id="searchItem">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
Search Customer
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
Add Customer
</div>
<div class="row trigger" name="addItem" id="addItem">
Add Item
</div>
<div class="row trigger" name="searchItem" id="searchItem">
Search Item
</div>
</div>
Actually your code working properly but the thing is that you cannot specfiy which div is opened now because all divs have the same content, so when you add numbers or a different content you can know which one is opened now
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
.11..
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
.22..
</div>
<div class="row trigger" name="addItem" id="addItem">
.33..
</div>
<div class="row trigger" name="searchItem" id="searchItem">
.44..
</div>
</div>
Simpy use the JQuery toggle function like so
function show(target) {
$('#'+target).toggle();
}
You could replace your entire JS in the snippet to just these LOC. HTML remains the same.
function show(target) {
$('#'+target).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
Updated answer
function show(target) {
$("#Display").html( $('#' + target).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer" hidden>
Searching Customers
</div>
<div class="row trigger" name="addCustomer" id="addCustomer" hidden>
Customers added
</div>
<div class="row trigger" name="addItem" id="addItem" hidden>
Items added
</div>
<div class="row trigger" name="searchItem" id="searchItem" hidden>
Searching Items
</div>
<div id="Display">
</div>
</div>