We Keep Coding

How to add auto page break and footer per page in jsPDF?

How to add page break automatically when the page will be printed, I use jspdf plugin in vuejs 2, is it possible to add page break using those plugins?
Currently, the 2nd div appears broken in the exported file hence I would like to have the div and footer will appear from the next page.
Here's my code:
.final-proof-container {
width: 1296px;
height: 775px;
/* background-color: #e8e8e8; */
border-top: 6px solid #383434;
border-left: 6px solid #383434;
border-right: 6px solid #383434;
/* padding: 10px 10px 10px 10px; */
/* display: inline-flex;
flex-direction: column;
flex-wrap: wrap; */
}
.final-proof-content {
/* width: 330px; */
min-height: 350px;
background-color: #474747;
display: flex;
flex-direction: row;
color: white;
border-radius: 5%;
/* margin-left: 8px;
margin-right: 4px; */
font-weight: 400;
font-family: "Open Sans", sans-serif;
font-size: 12px;
/* padding: 10px 10px 10px 10px; */
/* margin: 10px 10px 10px 10px; */
/* margin-bottom: 10px; */
}
.material-type {
display: flex;
flex-direction: row;
align-items: center;
}
.left-content {
width: 60%;
padding-top: 10px;
padding-left: 10px;
}
.right-content {
width: 40%;
padding-top: 10px;
padding-left: 5px;
padding-right: 10px;
}
.right-content img {
width: 100%;
height: 50%;
}
.dimensions {
list-style: none;
}
.option-logo {
width: 20px;
height: 12px;
}
.material-circle {
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 5px;
}
.final-proof-footer {
background-color: black;
width: 1296px;
}
.top-section {
background-color: #303030;
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
color: white;
font-weight: bolder;
font-family: "Open Sans", sans-serif;
}
.bottom-section {
display: flex;
flex-direction: row;
color: white;
flex-wrap: wrap;
justify-content: center;
height: 175px;
}
.logo {
width: 20%;
display: flex;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
min-width: 300px;
}
.order {
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
flex-wrap: wrap;
min-width: 300px;
}
.location {
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
flex-wrap: wrap;
min-width: 300px;
}
.shipping {
width: 26.8%;
display: flex;
flex-direction: row;
align-items: center;
border-right: 4px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
justify-content: center;
flex-wrap: wrap;
}
.order img {
width: 40px;
height: 40px;
}
.location img {
width: 40px;
height: 40px;
}
.shipping img {
width: 40px;
height: 40px;
}
.text-content {
display: flex;
flex-direction: column;
line-height: 0.1;
font-size: 14px;
}
.order-type {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-weight: bolder;
font-size: 20px;
text-align: center;
margin-right: 30px;
}
.logo img {
width: 200px;
height: 150px;
}
<template>
<div>
<v-btn color="primary" #click="generateReport">Generate</v-btn>
<div ref="order_details">
<div class="final-proof-container">
<v-layout row wrap style="padding: 10px !important">
<v-flex
xs4
md4
lg4
v-for="(item, index) in order.carts"
:key="index"
class="pa-0"
style="margin-bottom: 10px !important"
>
<div class="final-proof-content" style="margin: 10px !important">
<div class="left-content">
<p>Product(s): {{ getSectionNo(item) }}</p>
<p class="mb-1">Material Type:</p>
<div class="materia-type mb-2">
<span>
<div
class="material-circle"
:style="`background-color:${item.material.material_type.color}`"
></div>
{{ item.material.material_type.name }}
</span>
</div>
<p class="mb-1">Dimensions:</p>
<ul
v-if="Array.isArray(getDimensions(item))"
class="dimensions mb-2"
>
<li
v-for="(dimension, key) in getDimensions(item)"
:key="key"
>
{{ dimension.section_no }} - W: {{ dimension.width }}"| H:
{{ dimension.height }}"
</li>
</ul>
<p class="mb-1">Options:</p>
<!--Addition of option list in table layout-->
<table class="option-list" id="option-list">
<tr>
<td>
<img
src="/assets/img/price_point.png"
class="option-logo"
alt="Logo"
/>
</td>
<td><p class="mb-1 pl-1">Price Point: 2/$4.00</p></td>
</tr>
</table>
<table class="option-list">
<tr>
<td>
<img
src="/assets/img/comments.png"
width="20"
height="15"
alt="Comments"
/>
</td>
<td>
<p class="mb-1 pl-1">
Comments/Text: "Thanks for Shopping"
</p>
</td>
</tr>
</table>
<table class="option-list">
<tr>
<td>
<img
src="/assets/img/image.png"
width="20"
height="15"
alt="Logo"
/>
</td>
<td><p class="mb-1 pl-1">Logo: logo.png</p></td>
</tr>
</table>
<table class="quantity-table mt-2">
<tr>
<td>
<img
src="/assets/img/qty.png"
width="21"
height="8"
alt="Quantity"
/>
</td>
<td><p class="mb-2 pl-1">Quantity: 2</p></td>
</tr>
</table>
</div>
<div class="right-content">
<!-- <img :src="item.product.img_path" alt="" /> -->
</div>
</div>
</v-flex>
</v-layout>
</div>
<!-- footer -->
<div class="final-proof-footer">
<div class="top-section">
<div style="margin-top: 12px; margin-bottom: 8px">
ORDER # MEC_EO-150454_AbingstonStopNGas
</div>
<div style="margin-top: 12px; margin-bottom: 10px">
<!-- PAGE <span style="margin-left: 8px">1</span> OF 1 -->
</div>
<div style="margin-top: 12px; margin-bottom: 10px">
Designer: Ryan Strawn
</div>
</div>
<div class="bottom-section">
<div class="logo">
<img src="/assets/img/ww.png" alt="" />
</div>
<div class="order">
<div class="order-type">
<img src="/assets/img/man.png" alt="" />
<div style="margin-top: 12px">Ordered By</div>
</div>
<div class="text-content">
<p>Johnboy VanSampson</p>
<p>johnboy#cocacola.com</p>
<p>720-555-5698</p>
</div>
</div>
<div class="location">
<div class="order-type">
<img src="/assets/img/shop.png" alt="" />
<div style="margin-top: 12px">Project</div>
<div>Location</div>
</div>
<div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div>
</div>
<div class="shipping">
<div class="order-type">
<img src="/assets/img/car.png" alt="" />
<div style="margin-top: 12px">Shipping</div>
</div>
<div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { jsPDF } from "jspdf";
export default {
props: {
value: {
type: Object,
},
},
data() {
return {
order: {},
htmlToPdfOptions: {
html2canvas: {
useCORS: true,
scale: 2,
},
jsPDF: {
// unit: "px",
format: "letter",
orientation: "landscape",
},
},
};
},
watch: {
value(val) {
this.order = val;
},
},
mounted() {
const vm = this;
// vm.generateReport();
},
methods: {
async generateReport() {
const vm = this;
const doc = new jsPDF({
orientation: "l",
unit: "px",
format: "letter",
hotfixes: ["px_scaling"],
compress: true,
});
doc.html(vm.$refs.order_details, {
margin: 10,
autoPaging: "slice",
html2canvas: {
scale: 0.8,
},
pagesplit: true,
callback: function (doc) {
doc.save("test.pdf");
},
});
},
},
};
</script>

atm, I don't see any property or function to support page break when printing HTML element, you just can do it manually via doc.addPage().
To add header and footer on each page, you can iterate each page of doc, then attach your header and footer to suitable position.
For example:
for (let i = 1; i <= doc.getNumberOfPages(); i++) {
doc.setPage(i)
doc.text('This is header', 10, 30)
}

while drag and drop the job box, how to automatically resize or cover the timetable blocks based on the data-column value in job box in jquery?

After I drop the job box in to the time table, I want the job box to cover the timetable boxes according to the data-column value on the job box. Example: if the job-A box has 4 in data-column attribute, then this should cover 4 boxes in timetable, meaning this job needs 4 hours to complete.Thank you in advance.
$(function() {
$('.job').draggable({
revert: true
});
$('.container').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$(this).addClass("dropped");
},
over: function(e, ui) {
$(this).addClass("dropped");
},
out: function(e, ui) {
$(this).removeClass("dropped");
}
});
});
.job {
width: 50px;
height: 15px;
padding: 2px;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color: #B9CD6D;
}
.dropJob {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.dropJob div {
border: 2px solid #1974a8;
border-right: none;
border-bottom: none;
padding: 3px 4px;
background: #a5d5ff;
line-height: 25px;
}
.dropJob div:nth-of-type(10n) {
border-right: 2px solid #1974a8;
}
.dropJob div:nth-last-child(-n + 10) {
border-bottom: 2px solid #1974a8;
}
.dropJob div:nth-child(10n + 1) {
background: #32a4e5;
font-size: 12px;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
}
.dropped {
background: green !important;
}
.timing {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.timing div {
text-align: center;
align-items: center;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
font-size: 15px;
background: #1974a8;
}
.scheduleContain {
width: 100%;
margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>
<div class="scheduleContain">
<div class="timing">
<div>Name</div>
<div>9am</div>
<div>10am</div>
<div>11am</div>
<div>12am</div>
<div>1pm</div>
<div>2pm</div>
<div>3pm</div>
<div>4pm</div>
<div>5pm</div>
</div>
<div class="dropJob">
<div>John Smith</div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>

You can try like this:
$(function() {
$('.job').draggable({
revert: true
});
$('.container').droppable({
hoverClass: 'active',
drop: function(e, ui) {
const job = ui.draggable
let columnSize = job.data('column')
let tempContainer = $(this);
let randomColor = "#" + Math.floor(Math.random()*16777215).toString(16) + " !important";
for (let i = 1; i <= columnSize; i++) {
$(tempContainer).addClass('dropped')
$(tempContainer).css('background-color', randomColor)
if (i > 1 && i <= columnSize) {
$(tempContainer).addClass('dropped-child')
}
$(tempContainer).data('job-id', job.text())
tempContainer = tempContainer.next();
}
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$(this).addClass("dropped");
},
over: function(e, ui) {
$(this).addClass("dropped");
},
out: function(e, ui) {
$(this).removeClass("dropped");
}
});
});
.job {
width: 50px;
height: 15px;
padding: 2px;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color: #B9CD6D;
}
.dropJob {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.dropJob div {
border: 2px solid #1974a8;
border-right: none;
border-bottom: none;
padding: 3px 4px;
background: #a5d5ff;
line-height: 25px;
}
.dropJob div:nth-of-type(10n) {
border-right: 2px solid #1974a8;
}
.dropJob div:nth-last-child(-n + 10) {
border-bottom: 2px solid #1974a8;
}
.dropJob div:nth-child(10n + 1) {
background: #32a4e5;
font-size: 12px;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
}
.dropped {
background: green;
}
.timing {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.timing div {
text-align: center;
align-items: center;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
font-size: 15px;
background: #1974a8;
}
.scheduleContain {
width: 100%;
margin: 0 auto;
}
.dropped-child {
border-left: none !important;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>
<div class="scheduleContain">
<div class="timing">
<div>Name</div>
<div>9am</div>
<div>10am</div>
<div>11am</div>
<div>12am</div>
<div>1pm</div>
<div>2pm</div>
<div>3pm</div>
<div>4pm</div>
<div>5pm</div>
</div>
<div class="dropJob">
<div>John Smith</div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>

Create word bubbles as buttons in HTML/CSS/JS?

I'm trying to create multiple bubbled words as buttons!
what is the best way to approach the design below using CSS or any JS library?
There can be many buttons (depends on the data from DB)
What I've tried:
#tagsContainer {
float: left;
width: 25vw;
margin-top: 10vh;
overflow: hidden;
}
#tags {
display: grid;
justify-content: space-between;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}
#tag {
background-color: #2F3841;
border-radius: 8px;
margin-top: 10px;
width: max-content;
}
<div id="tagsContainer">
<h3 id="tagsTitle">TOP TAGS</h3>
<div id="tags">
<div id="tag">
<h4 id="tagTitle">Flutter</h4>
</div>
<div id="tag">
<h4 id="tagTitle">Deep Learning</h4>
</div>
<div id="tag">
<h4 id="tagTitle">Machine Learning</h4>
</div>
</div>
</div>
The problem is when using grid layout all the columns would be same in size!

Just use display:inline-block and style your container as you want.
P.s. you have the same id multiple times, use class instead because id must be unique
#tagsContainer {
/*float: left; REMOVE IT!!!*/
width: 25vw;
margin-top: 10vh;
overflow: hidden;
}
#tags {
/* NOT NECESSARY
display: grid;
justify-content: space-between;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
*/
}
.tag {
background-color: #2F3841;
border-radius: 8px;
margin-top: 10px;
width: max-content;
display:inline-block;
}
<div id="tagsContainer">
<h3 id="tagsTitle">TOP TAGS</h3>
<div id="tags">
<div class="tag">
<h4 class="tagTitle">Flutter</h4>
</div>
<div class="tag">
<h4 class="tagTitle">Deep Learning</h4>
</div>
<div class="tag">
<h4 class="tagTitle">Machine Learning</h4>
</div>
</div>
</div>

Do you mean this?
body {
background: #202223;
}
#tags {
font-family: cursive;
width: 292px;
}
.tag {
font-family: inherit;
background: #2b333b;
font-size: 14px;
padding: 10px 33px;
border: none;
border-radius: 16px;
color: #d4d4d4;
font-style: italic;
display: inline-block;
width: max-content;
margin: 4px 4px;
}
.tag:hover {
opacity: 0.9;
}
.tag:focus {
outline: 1px solid #6868688f;
outline-offset: -3px;
}
<div id="tags">
<button class="tag">Flutter</button>
<button class="tag">Data Science</button>
<button class="tag">CSS</button>
<button class="tag">Deep Learning</button><button class="tag">Machine Learning</button>
</div>

How to create collapsible content with split button? (HTML/CSS/JS)

With two columns (left indicates name; right provide collapse function(a button)), how would you create collapsible content on the next row with full width (covers both columns)?
I am only able to collapse within a certain column. I tried to collapse a row below by creating a new div, but then the collapsing action no longer seems to work.
It should look like this:
Thank you for your help!
JavaScript is from: https://www.w3schools.com/howto/howto_js_collapsible.asp
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: gray;
}
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>

A slight change in your JS toggle and also putting content outside the parent div so that it act as block
$(document).ready(function () {
$('.collapsible').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
// toggle accordion link open class
accordion.toggleClass("active");
// toggle accordion content
accordionContent.slideToggle(250);
accordionContent.toggleClass("active");
});
});
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.collapsible.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
display: none;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: #BFBFBF;
padding: 10px;
color: #fff;
}
.content.active {
height: auto;
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>

Are you need like this?
var buttons = document.querySelectorAll('.toggle');
buttons.forEach(function(el) {
el.addEventListener('click', function(event) {
var target = event.target.getAttribute('target');
document.getElementById(target).classList.toggle('expanded');
});
});
table {
width: 100%;
}
table td:nth-child(2) {
width: 100px;
}
.row-detail {
display: none;
}
.expanded {
display: block;
}
<table>
<tr>
<td>Row 1</td>
<td><button class="toggle" target="row-detail-1">Toggle 1</button></td>
</tr>
<tr id="row-detail-1" class="row-detail">
<td colspan="2">This detail from row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="toggle" target="row-detail-2">Toggle 2</button></td>
</tr>
<tr id="row-detail-2" class="row-detail">
<td colspan="2">This detail from row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="toggle" target="row-detail-3">Toggle 3</button></td>
</tr>
<tr id="row-detail-3" class="row-detail">
<td colspan="2">This detail from row 3</td>
</tr>
</table>

Issues getting a show hide function to work right

I have three titles acting as buttons. Button 1, 2 and 3. On page load, I am wanting the button 1 section to show, but then if someone would click on button 2 or 3 for the previous button description to hide and for the new one to appear in its place.
So far I cannot get this to work. I added display: none; to the general class, but I as I said, I want the first one to display on page load.
What am I doing wrong?
$('#big-three-names').click(function() {
var thisDescription = $('.big-three-info', $(this));
$('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>

You can do following way using JQuery. Get html text of selected button and display div using .eq() of JQuery.
Display first using $('.big-three-info').eq(0).css("display", "block"); on page load.
$('.big-three-names').click(function() {
var i = $( this ).html();
$('.big-three-info').css("display", "none")
$('.big-three-info').eq(i-1).css("display", "block");
});
$('.big-three-info').eq(0).css("display", "block");
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>

here is another solution
$('.big-three-info').eq(0).show();//show the first
$('.big-three-names').click(function() {
var index = $(this).index();//getting the index for button
$('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index
});
JS Fiddle

1.WORKING DEMO
2.Updated DEMO
HTML
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
<div class="big-three-info one-sub">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info two-sub">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info three-sub">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
JS
$('.big-three-names').click(function() {
$(".big-three-info").hide();
$("."+$(this).attr("class").split(" ")[1]+"-sub").show();
});
By the way big-three-names is your class name and not ID