We Keep Coding

Using jquery in make a dropdown

I have this program which make a dropdown-content appear after clicking the ... button and disappear after clicking it again
So, I want the dropdown-content to disappear after clicking anywhere in the body
I tried a lot of ways but with every one of them the button stop working
The Code :-
JavaScript :
$(document).ready( function() {
$(".commentdropdown .dropbtn").on("click", function(e){
$(this).next('.dropdown-content').toggleClass("apear");
});
});
CSS :
.commentdropdown{
float: right;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.apear{
display: block;
}
HTML :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="commentdropdown pr-3">
<button class="dropbtn btn p-0 m-0 bg-white">btn 1</button>
<div class="dropdown-content">
Edit 1
Delete 1
</div>
<button class="dropbtn btn p-0 m-0 bg-white">btn 2</button>
<div class="dropdown-content">
Edit 2
Delete 2
</div>
<button class="dropbtn btn p-0 m-0 bg-white">btn 3</button>
<div class="dropdown-content">
Edit 3
Delete 3
</div>
</div>

Heres a quick example. You dont really need the trigger to be a button as its not submitting anything. If you wrap each element in a parent container, its easier to target child elements.
$(function(){
var dropdown = $('.dropdown');
var toggle = dropdown.find('.dropdown__trigger');
toggle.click(function(event){
event.preventDefault();
$(this).siblings().slideToggle();
});
});
.dropdown__content{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<div class="dropdown__trigger p-0 m-0 bg-white">btn 1</div>
<div class="dropdown__content">
Edit 1
Delete 1
</div>
</div>
<div class="dropdown">
<div class="dropdown__trigger p-0 m-0 bg-white">btn 2</div>
<div class="dropdown__content">
Edit 1
Delete 1
</div>
</div>
<div class="dropdown">
<div class="dropdown__trigger p-0 m-0 bg-white">btn 3</div>
<div class="dropdown__content">
Edit 1
Delete 1
</div>
</div>

jQuery toggle class not working correctly

I created a simple tab filter, but I can't get it to work correctly. When the page first reloads i want the tab content to be hidden and I want the "more" to show on all the tabs, so far that's working. When you click on "more" the tab content should display, and "more" for that current tab should be hidden. I also need the tabs to toggle so i you click the tab again it should hide the tab content and show "more". Right now that issues that i'm having are that when you click on a tab the tab content of the other tabs show, but not the content of that tab, and also "more" doesn't show unless you click on another tab. Thanks!!
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
$('.iconsContainer').children().removeClass('current');
$(this).addClass('current');
$('.tripctychContent-container').children().toggleClass('hideText');
$('.iconContainerMore').removeClass('hideText');
$('.iconContainerMore', this).toggleClass('hideText');
$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
});
});
.hideText{
display: none;
}
.tab{
cursor: pointer;
}
.iconsContainer{
display: flex;
justify-content: space-between;
}
.tab p:first-of-type:hover{
background: black;
}
.tab p:first-of-type{
padding: 15px 30px;
background: blue;
color: white;
}
.current p:first-of-type{
background: black !important;
}
.tripctychContent-container p{
background: red;
color: white;
}
p{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
<a class="tab" data-tabid="topic1">
<div>
<p>Topic 1 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic2">
<div>
<p>Topic 2 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic3">
<div>
<p>Topic 3 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
</div>
<div class="tripctychContent-container">
<div class="field--name-field-topic-1-content hideText" data-blockid="topic1">
<p>Topic 1 body</p>
</div>
<div class="field--name-field-topic-2-content hideText" data-blockid="topic2">
<p>Topic 2 body</p>
</div>
<div class="field--name-field-topic-3-content hideText" data-blockid="topic3">
<p>Topic 3 body</p>
</div>
</div>

HERE!
just update the JS:
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
//alert(tabID);
$('.iconsContainer').children().removeClass('current');
$(this).addClass('current');
//$('.tripctychContent-container').toggleClass('hideText');
$('.iconContainerMore').removeClass('hideText');
$('.iconContainerMore', this).toggleClass('hideText');
$( ".tripctychContent-container>div").hide();
$( ".tripctychContent-container>div[data-blockid=" + tabID + " ]" ).show();
$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
});
});

You don't need to removeClass explicitly if you are already using toggleClass for the same.

A little change in your JS function in the end.
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
alert(tabID);
$('.iconsContainer').children().removeClass('current');
$(this).addClass('current');
$('.tripctychContent-container').children().toggleClass('hideText');
$('.iconContainerMore').removeClass('hideText');
$('.iconContainerMore', this).toggleClass('hideText');
$('.field-class').hide()
$("[data-blockid=" + tabID + "]").show();
});
});
And have assigned a common class to all the tab content
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
<a class="tab" data-tabid="topic1">
<div>
<p>Topic 1 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic2">
<div>
<p>Topic 2 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic3">
<div>
<p>Topic 3 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
</div>
<div class="tripctychContent-container">
<div class="field-class hideText" data-blockid="topic1">
<p>Topic 1 body</p>
</div>
<div class="field-class hideText" data-blockid="topic2">
<p>Topic 2 body</p>
</div>
<div class="field-class hideText" data-blockid="topic3">
<p>Topic 3 body</p>
</div>
</div>
Hope this helps!

Totality Error when adding the same item twice

Error in Adding the totality of items
Im working in on an assignment given by our professor to practice Javascript.
Currently, im having a problem finding whats wrong with the formula ive entered.
Ive debugged it in chrome and it showed me these results:
The sum is correct when i add two separate items together 1 time.
the sum is tripled when i add the same item twice:
every code was performing well until it goes to Line 17 in prelim.js where it shows the output.
Heres the screenshot of the Output:
(pardon if its in links, the site tells me i cant show pics because i dont have that much reputation yet :) )
This is the sample program.
also the code:
var total=0;
function add (val) {
var itemName = document.getElementById('item' + val).innerHTML
var price = document.getElementById('price' + val).innerHTML
var subtotal = document.getElementById('subtotal' + val).innerHTML
price = price.replace('P ', '');
price = parseFloat(price);
var value = parseFloat(subtotal) + price;
document.getElementById('subtotal' + val).innerHTML = value.toFixed(2);
//totality
total+=value;
document.getElementById('totality').innerHTML = total.toFixed(2);
}
function subtract (val) {
//get values from list ids
var itemName = document.getElementById('item' + val).innerHTML
var price = document.getElementById('price' + val).innerHTML
var subtotal = document.getElementById('subtotal' + val).innerHTML
//convert price id to float 0.2 value
price = price.replace('P ', '');
price = parseFloat(price);
var value = parseFloat(subtotal);
//error trapping to prevent negative value
total -= value;
value= value - price;
if (value < 0){
return false
}
//output
document.getElementById('subtotal' + val).innerHTML = value.toFixed(2);
document.getElementById('totality').innerHTML = total.toFixed(2);
}
//summary of purchases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PRELIM POS</title>
<style>
body>div {
display: flex;
flex-direction: column;
width: 65%;
margin: 0 auto;
}
li {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: .6em 0;
}
li>div {
width: 25%;
}
li>div:first-child {
width: 40%;
}
.list0 {
font-weight: bold;
}
.container {
border-width: medium;
border-style: solid;
border-color: grey;
border-spacing: 20rem;
}
</style>
</head>
<body>
<div class="container">
<li class="list0">
<div id="item0">Line Item</div>
<div id="price0">Price</div>
<div id="quantity0">Quantity</div>
<div id="subtotal0">Subtotal</div>
</li>
<li class="list1">
<div id="item1">Korean Bibimbap</div>
<div id="price1">P 115.00</div>
<div id="quantity1">
<button onclick="add(1)">+</button>
<button onclick="subtract(1)">-</button>
</div>
<div id="subtotal1">0.00</div>
</li>
<li class="list2">
<div id="item2">Italian Ala king</div>
<div id="price2">P 115.00</div>
<div id="quantity2">
<button onclick="add(2)">+</button>
<button onclick="subtract(2)">-</button>
</div>
<div id="subtotal2">0.00</div>
</li>
<li class="list3">
<div id="item3">Krushers</div>
<div id="price3">P 80.00</div>
<div id="quantity3">
<button onclick="add(3)">+</button>
<button onclick="subtract(3)">-</button>
</div>
<div id="subtotal3">0.00</div>
</li>
<li class="list4">
<div id="item4">Spanish Salpicao</div>
<div id="price4">P 115.00</div>
<div id="quantity4">
<button onclick="add(4)">+</button>
<button onclick="subtract(4)">-</button>
</div>
<div id="subtotal4">0.00</div>
</li>
<li class="list5">
<div id="item5">Zinger</div>
<div id="price5">P 95.00</div>
<div id="quantity5">
<button onclick="add(5)">+</button>
<button onclick="subtract(5)">-</button>
</div>
<div id="subtotal5">0.00</div>
</li>
<li class="list6">
<div id="item6">California Maki Twister</div>
<div id="price6">P 85.00</div>
<div id="quantity6">
<button onclick="add(6)">+</button>
<button onclick="subtract(6)">-</button>
</div>
<div id="subtotal6">0.00</div>
</li>
<li class="list7">
<div id="item7">Hot n' Cheesy Chicken</div>
<div id="price7">P 99.00</div>
<div id="quantity7">
<button onclick="add(7)">+</button>
<button onclick="subtract(7)">-</button>
</div>
<div id="subtotal7">0.00</div>
</li>
<li class="list8">
<div id="item8">Flavor Shots</div>
<div id="price8">P 66.00</div>
<div id="quantity8">
<button onclick="add(8)">+</button>
<button onclick="subtract(8)">-</button>
</div>
<div id="subtotal8">0.00</div>
</li>
<li class="list9">
<div id="item9">Crispy Fries</div>
<div id="price9">P 55.00</div>
<div id="quantity9">
<button onclick="add(9)">+</button>
<button onclick="subtract(9)">-</button>
</div>
<div id="subtotal9">0.00</div>
</li>
<li class="list10">
<div id="item10">Chizza</div>
<div id="price10">P 100.00</div>
<div id="quantity10">
<button onclick="add(10)">+</button>
<button onclick="subtract(10)">-</button>
</div>
<div id="subtotal10">0.00</div>
</li>
<li class="list11">
<div id="item11">Famous Bowl</div>
<div id="price11">P 115.00</div>
<div id="quantity11">
<button onclick="add(11)">+</button>
<button onclick="subtract(11)">-</button>
</div>
<div id="subtotal11">0.00</div>
</li>
<li class="list12">
<div id="item12">Regular Bucket Meal</div>
<div id="price12">P 570.00</div>
<div id="quantity12">
<button onclick="add(12)">+</button>
<button onclick="subtract(12)">-</button>
</div>
<div id="subtotal12">0.00</div>
</li>
<li class="list13">
<div id="item13">Rice</div>
<div id="price13">P 25.00</div>
<div id="quantity13">
<button onclick="add(13)">+</button>
<button onclick="subtract(13)">-</button>
</div>
<div id="subtotal13">0.00</div>
</li>
<li class="list14">
<div id="item14">2pc Chicken Meal</div>
<div id="price14">P 155.00</div>
<div id="quantity14">
<button onclick="add(14)">+</button>
<button onclick="subtract(14)">-</button>
</div>
<div id="subtotal14">0.00</div>
</li>
<li class="list15">
<div id="item15">Coleslaw</div>
<div id="price15">P 45.00</div>
<div id="quantity15">
<button onclick="add(15)">+</button>
<button onclick="subtract(15)">-</button>
</div>
<div id="subtotal15">0.00</div>
</li>
<!-- totality -->
</div>
<div class="container1">
<h3>Summary:</h3> <br>
<p>
</p>
<h3>Total: </h3>
<div id="totality">0.00</div>
</div>
<script src="../prelim.js"></script>
</body>
</html>

To fix the adding and subtracting of the price to should calculate the subTotal but only add the price to the total.
You could update your add and subtract functions to:
function add (val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) + price;
var totality = parseFloat(totalityElm.innerHTML) + price;
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
function subtract (val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) - price;
var totality = parseFloat(totalityElm.innerHTML) - price;
if (subTotal < 0){
return false
}
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
function add(val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) + price;
var totality = parseFloat(totalityElm.innerHTML) + price;
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
function subtract(val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) - price;
var totality = parseFloat(totalityElm.innerHTML) - price;
if (subTotal < 0) {
return false
}
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
body>div {
display: flex;
flex-direction: column;
width: 65%;
margin: 0 auto;
}
li {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: .6em 0;
}
li>div {
width: 25%;
}
li>div:first-child {
width: 40%;
}
.list0 {
font-weight: bold;
}
.container {
border-width: medium;
border-style: solid;
border-color: grey;
border-spacing: 20rem;
}
<div class="container">
<li class="list0">
<div id="item0">Line Item</div>
<div id="price0">Price</div>
<div id="quantity0">Quantity</div>
<div id="subtotal0">Subtotal</div>
</li>
<li class="list1">
<div id="item1">Korean Bibimbap</div>
<div id="price1">P 115.00</div>
<div id="quantity1">
<button onclick="add(1)">+</button>
<button onclick="subtract(1)">-</button>
</div>
<div id="subtotal1">0.00</div>
</li>
<li class="list2">
<div id="item2">Italian Ala king</div>
<div id="price2">P 115.00</div>
<div id="quantity2">
<button onclick="add(2)">+</button>
<button onclick="subtract(2)">-</button>
</div>
<div id="subtotal2">0.00</div>
</li>
<li class="list3">
<div id="item3">Krushers</div>
<div id="price3">P 80.00</div>
<div id="quantity3">
<button onclick="add(3)">+</button>
<button onclick="subtract(3)">-</button>
</div>
<div id="subtotal3">0.00</div>
</li>
<li class="list4">
<div id="item4">Spanish Salpicao</div>
<div id="price4">P 115.00</div>
<div id="quantity4">
<button onclick="add(4)">+</button>
<button onclick="subtract(4)">-</button>
</div>
<div id="subtotal4">0.00</div>
</li>
<li class="list5">
<div id="item5">Zinger</div>
<div id="price5">P 95.00</div>
<div id="quantity5">
<button onclick="add(5)">+</button>
<button onclick="subtract(5)">-</button>
</div>
<div id="subtotal5">0.00</div>
</li>
<li class="list6">
<div id="item6">California Maki Twister</div>
<div id="price6">P 85.00</div>
<div id="quantity6">
<button onclick="add(6)">+</button>
<button onclick="subtract(6)">-</button>
</div>
<div id="subtotal6">0.00</div>
</li>
<li class="list7">
<div id="item7">Hot n' Cheesy Chicken</div>
<div id="price7">P 99.00</div>
<div id="quantity7">
<button onclick="add(7)">+</button>
<button onclick="subtract(7)">-</button>
</div>
<div id="subtotal7">0.00</div>
</li>
<li class="list8">
<div id="item8">Flavor Shots</div>
<div id="price8">P 66.00</div>
<div id="quantity8">
<button onclick="add(8)">+</button>
<button onclick="subtract(8)">-</button>
</div>
<div id="subtotal8">0.00</div>
</li>
<li class="list9">
<div id="item9">Crispy Fries</div>
<div id="price9">P 55.00</div>
<div id="quantity9">
<button onclick="add(9)">+</button>
<button onclick="subtract(9)">-</button>
</div>
<div id="subtotal9">0.00</div>
</li>
<li class="list10">
<div id="item10">Chizza</div>
<div id="price10">P 100.00</div>
<div id="quantity10">
<button onclick="add(10)">+</button>
<button onclick="subtract(10)">-</button>
</div>
<div id="subtotal10">0.00</div>
</li>
<li class="list11">
<div id="item11">Famous Bowl</div>
<div id="price11">P 115.00</div>
<div id="quantity11">
<button onclick="add(11)">+</button>
<button onclick="subtract(11)">-</button>
</div>
<div id="subtotal11">0.00</div>
</li>
<li class="list12">
<div id="item12">Regular Bucket Meal</div>
<div id="price12">P 570.00</div>
<div id="quantity12">
<button onclick="add(12)">+</button>
<button onclick="subtract(12)">-</button>
</div>
<div id="subtotal12">0.00</div>
</li>
<li class="list13">
<div id="item13">Rice</div>
<div id="price13">P 25.00</div>
<div id="quantity13">
<button onclick="add(13)">+</button>
<button onclick="subtract(13)">-</button>
</div>
<div id="subtotal13">0.00</div>
</li>
<li class="list14">
<div id="item14">2pc Chicken Meal</div>
<div id="price14">P 155.00</div>
<div id="quantity14">
<button onclick="add(14)">+</button>
<button onclick="subtract(14)">-</button>
</div>
<div id="subtotal14">0.00</div>
</li>
<li class="list15">
<div id="item15">Coleslaw</div>
<div id="price15">P 45.00</div>
<div id="quantity15">
<button onclick="add(15)">+</button>
<button onclick="subtract(15)">-</button>
</div>
<div id="subtotal15">0.00</div>
</li>
<!-- totality -->
</div>
<div class="container1">
<h3>Summary:</h3> <br>
<p>
</p>
<h3>Total: </h3>
<div id="totality">0.00</div>
</div>

Add / remove div for each button on click

I'm trying use append to give each button it's own div (.modal-item) that can be created and removed inside of the .modal container when the button is clicked. Each .item has it's own button and different content nested inside.
What I need as an example: If I click the button labelled Btn 1, I want a .modal-item div created inside of .modal that has the content from the Btn 1 .item. If I click Btn 1 again, it is removed. The same goes for each of the buttons.
The buttons should act as a checkbox for creating and removing the .modal-items. So in other words, the adding/removing of each .modal-item is handled by it's button.
$(function() {
$('#btn').click(function() {
var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
$('.modal').append(newDiv);
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button id="btn">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button id="btn">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button id="btn">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

1st: id must be unique so you need to change id="btn" to class="btn"
2nd: by using data attribute for each btn and pass it to the modal-item div it can be done
$(function() {
$('.btn').click(function() {
var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
$('.modal').append(newDiv);
}else{
$('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
}
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button class="btn" data-btn="btn1">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn2">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn3">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

Click on Current Div to Hide the Others

I'm learning jQuery's hide/show function, and I need to have it so when I click on a div, it shows that div, and hides the other. Right now I have a SUPER janky, and SUPER inefficient way of doing it:
$(document).ready(function(){
$(".FifteenInfo").hide();
$(".FourtyInfo").hide();
$(".SixtyInfo").hide();
$(".FifteenSpecs").hide();
$(".FourtySpecs").hide();
$(".SixtySpecs").hide();
$(".Show15").click(function(){
$(".FifteenInfo").show();
$(".FifteenSpecs").show();
$(".FourtySpecs").hide();
$(".SixtySpecs").hide();
$(".FourtyInfo").hide();
$(".SixtyInfo").hide();
});
});
My HTML:
<div class="buttons">
<button class="buttonText Show15" width="200" height="300">DSL 6</button>
<button class="buttonText Show40" width="200" height="300">DSL 10</button>
<button class="buttonText Show60" width="200" height="300">DSL 15</button>
<button class="buttonText Show40" width="200" height="300">DSL 25</button>
<button class="buttonText Show60" width="200" height="300">DSL 50</button>
</div>
<div class="FifteenInfo border">
<h1 class="Package">DSL 6</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">6</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">800</h1>
<p class="Megabyte">Kbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
<div class="FourtyInfo border">
<h1 class="Package">DSL 10</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">10</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">1</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
So is there a way to do this where it automatically checks which div you clicked on to show it, and to hide the others?
Thanks in advance.

The generic way to do this is to link up the trigger element with its content using data-* attributes, along with giving all content elements a shared class so they can all be hidden in one.
$('.content').hide();
$('.btn').click(function(){
$('.content').hide()
var target = $(this).data("target");
$(target).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-target="#content1">Show 1</button>
<button class="btn" data-target="#content2">Show 2</button>
<div id="content1" class="content">Content 1</div>
<div id="content2" class="content">Content 2</div>

$(".header").click(function() {
//current div
$header = $(this);
//getting the next element
$content = $header.next();
//Hide all other than current div.
$(".header").next().not($content).hide();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.toggle(500, function() {
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>

Try this
$(document).ready(function(){
$(".show").hide();
$(".Show15").click(function(){
$(".show").show();
});
$(".Show40").click(function(){
$(".show").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="buttons">
<button class="buttonText Show15" width="200" height="300">DSL 6</button>
<button class="buttonText Show40" width="200" height="300">DSL 10</button>
</div>
<div class="show">
<div class="FifteenInfo border">
<h1 class="Package">DSL 6</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">6</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">800</h1>
<p class="Megabyte">Kbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
<div class="FourtyInfo border">
<h1 class="Package">DSL 10</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">10</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">1</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div></div>

You can create a wrapper function to hide all similar elements using class pattern selectors
Sample Code
$(".buttonText").click(function() {
hideAll();
var _showClass = $(this).attr("class").match(/Show.{2}/).pop();
switch (_showClass) {
case "Show15":
toggleSection("Fifteen", true);
break;
case "Show40":
toggleSection("Fourty", true);
break;
case "Show60":
toggleSection("Sixty", true);
break;
}
});
function toggleSection(group, show) {
var selector = "[class^=" + group + "]";
show ? $(selector).show() : $(selector).hide();
}
Sample Fiddle.
Note: This will hide all similar classes. Eg: toggleSection("Fourty", true) this will hide elements with FourtyInfo, FourtySpecs and Fourty...
If you have such case, I suggest you try something like this:
function toggleSection(group, show) {
var sections = ["Info", "Specs"];
var selector = sections.map(function(k) {
return "." + group + k
}).join();
show ? $(selector).show() : $(selector).hide();
}
This will have more control as you have specified which classes are to be used.
Sample Fiddle

Here is the shortest way .. works for all situations ..
script:
$(document).ready(function(){
// at the start..
$('body').children().first().addClass('show');
$('div').click(function(){
$(this).removeClass('show');
$(this).next().addClass('show');
});
// at the end ..
$('body').children().last().click(function(){
$('body').children().first().addClass('show');
});
});
in ur style add
div{
visibility: hidden;
}
.show{
visibility: visible;
}
Full code and working Demo Here