We Keep Coding

CSS :not(:first-of-type) isn't working on div but works on other elements

I am creating an accordion in which the first element is open. Crediting the code here.
The main modification to this code is that I wanted to put some subtext under the main title, so I created a div and wrapped the h2 and h3 inside of it. You can see my HTML, CSS, and JS below:
$(function() {
$(".accordion-content:not(:first-of-type)").css("display", "none");
$(".js-accordion-title:first-of-type").addClass("open");
$(".js-accordion-title").click(function() {
$(".open").not(this).removeClass("open").next().slideUp(300);
$(this).toggleClass("open").next().slideToggle(300);
});
});
.accordion-title {
border-top: 1px solid #BEBEBE;
padding: 2em 0;
background: #F7F7F7;
}
.accordion-container .accordion-title h2 {
position: relative;
margin: 0;
background-color: #F7F7F7;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
color: #DA15B6;
text-align: center;
cursor: pointer;
margin-bottom: .125em;
}
.accordion-container .accordion-title h3 {
background-color: #F7F7F7;
font-size: 18px;
letter-spacing: 0.9px;
line-height: 1.5em;
font-weight: 600;
text-transform: uppercase;
color: #000;
text-align: center;
}
.price-number {
font-size: 25px;
letter-spacing: 0.54px;
font-weight: 700;
}
.accordion-container .accordion-title h2::after {
content: '3';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
.accordion-container .accordion-title.open h2::after {
content: '2';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
/*CSS for CodePen*/
.accordion-content {
padding-left: 2.3125em;
}
.accordion-container {
width: 100%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" class="accordion-container">
<div class="accordion-title js-accordion-title">
<h2 class="price-plan-name">Standard</h2>
<h3 class="starting-price">Starting at
<span class="price-number">$1,650</span></h3>
</div>
<div class="accordion-content">
<p>Accordion Content1</p>
</div>
<div class="accordion-title js-accordion-title">
<h2>Pro</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$2,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content2
</div>
<div class="accordion-title js-accordion-title">
<h2>Elite</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$3,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content3
</div>
</div>
The issue I am having is trying to have the first accordion-content opened on page load. This should be achievable with the first line of JS, "$(".accordion-content:not(:first-of-type)").css("display", "none");" but it doesn't seem to work. I believe it has to do with a conflict between the div "accordion-title" and div "accordion-content". If I change "accordion-content" to have a p or h5 tag for example, the code will work properly. Are there any suggestions on how I could work around this?
Thanks in advance.

First of type targets the first div(in your case) in the parent, not based on the class you provided so it would not work as you would expect
You can use this instead
$( ".accordion-content:not( :first )" ).css( "display", "none" );
or you could just set them all to display none in css and either open the first one with js or with a class in css and add that class in js or markup
$(function() {
$(".accordion-content:not(:first)").css("display", "none");
$(".js-accordion-title:first-of-type").addClass("open");
$(".js-accordion-title").click(function() {
$(".open").not(this).removeClass("open").next().slideUp(300);
$(this).toggleClass("open").next().slideToggle(300);
});
});
.accordion-title {
border-top: 1px solid #BEBEBE;
padding: 2em 0;
background: #F7F7F7;
}
.accordion-container .accordion-title h2 {
position: relative;
margin: 0;
background-color: #F7F7F7;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
color: #DA15B6;
text-align: center;
cursor: pointer;
margin-bottom: .125em;
}
.accordion-container .accordion-title h3 {
background-color: #F7F7F7;
font-size: 18px;
letter-spacing: 0.9px;
line-height: 1.5em;
font-weight: 600;
text-transform: uppercase;
color: #000;
text-align: center;
}
.price-number {
font-size: 25px;
letter-spacing: 0.54px;
font-weight: 700;
}
.accordion-container .accordion-title h2::after {
content: '3';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
.accordion-container .accordion-title.open h2::after {
content: '2';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
/*CSS for CodePen*/
.accordion-content {
padding-left: 2.3125em;
}
.accordion-container {
width: 100%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" class="accordion-container">
<div class="accordion-title js-accordion-title">
<h2 class="price-plan-name">Standard</h2>
<h3 class="starting-price">Starting at
<span class="price-number">$1,650</span></h3>
</div>
<div class="accordion-content">
<p>Accordion Content1</p>
</div>
<div class="accordion-title js-accordion-title">
<h2>Pro</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$2,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content2
</div>
<div class="accordion-title js-accordion-title">
<h2>Elite</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$3,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content3
</div>
</div>

.hide() all .accordion-content, then add .open to the .first() .js-accordion-title and .show() the .first() .accordion-content
$(function() {
$('.accordion-content').hide();
$(".js-accordion-title").first().addClass('open').next().show();
$(".js-accordion-title").click(function() {
$(this).toggleClass("open").next().slideToggle(300);
});
});
.accordion-container div.accordion-content:first-of-type {
background: red;
}
.accordion-title {
border-top: 1px solid #BEBEBE;
padding: 2em 0;
background: #F7F7F7;
}
.accordion-container .accordion-title h2 {
position: relative;
margin: 0;
background-color: #F7F7F7;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
color: #DA15B6;
text-align: center;
cursor: pointer;
margin-bottom: .125em;
}
.accordion-container .accordion-title h3 {
background-color: #F7F7F7;
font-size: 18px;
letter-spacing: 0.9px;
line-height: 1.5em;
font-weight: 600;
text-transform: uppercase;
color: #000;
text-align: center;
}
.price-number {
font-size: 25px;
letter-spacing: 0.54px;
font-weight: 700;
}
.accordion-container .accordion-title h2::after {
content: '3';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
.accordion-container .accordion-title.open h2::after {
content: '2';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
/*CSS for CodePen*/
.accordion-content {
padding-left: 2.3125em;
}
.accordion-container {
width: 100%;
margin: 0 auto;
}
<div id="accordion" class="accordion-container">
<div class="accordion-title js-accordion-title">
<h2 class="price-plan-name">Standard</h2>
<h3 class="starting-price">Starting at
<span class="price-number">$1,650</span></h3>
</div>
<div class="accordion-content">
<p>Accordion Content1</p>
</div>
<div class="accordion-title js-accordion-title">
<h2>Pro</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$2,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content2
</div>
<div class="accordion-title js-accordion-title">
<h2>Elite</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$3,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content3
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to develop a scroll bar for the center content

I am new to VueJS. I am developing an application using Vue and Bootstrap. The page is broken down into a left sidebar, a top navbar, a center view, and a right sidebar, like this:
I am looking to develop an a scrollbar so that only the center content is scrollable
Here is the code:
import GridView from 'src/components/Dashboard/Views/GridView.vue'
import ListView from 'src/components/Dashboard/Views/ListView.vue'
import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue'
export default {
methods:{
changeView(){
if(this.gridView === true){
this.gridView = false;
}
else if(this.gridView === false){
this.gridView = true;
}
},
openDetailsSection() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
showSection.style.width = "80%";
// showSection.classList.remove("col-xl-12", "col-md-6");
})
},
closeDetailsSection(){
if(detailsSectionOpen === true){
detailsSectionOpen = false;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.remove("col-xl-3");
showSection.classList.remove("col-xl-9", "col-md-6");
showSection.classList.add("col-xl-12", "col-md-6");
// Remove info button
const infoButton = document.getElementById('infoButton');
if (infoButton) {
infoButton.parentNode.removeChild(infoButton);
}
},
},
data(){
return {
detailsSectionOpen: false,
gridView: true,
shared: false
}
},
components: {
ListView,
GridView,
DetailsView
},
mounted(){
let folders = document.getElementsByClassName('folder-rectangle');
folders = Array.from(folders);
folders.forEach((folder) => folder.addEventListener('click', this.showButton));
}
}
.context-menu-item:hover {
background-color: #E91E63 !important;
}
.plus-circle-btn{
font-size: 70px;
color: #E91E63;
border: none;
cursor: pointer;
}
li .btn:hover{
color: #E91E63;
}
.details-ul li{
width: 261px;
height: 29px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 14px;
text-align: left;
line-height: 1px;
padding: 5px;
}
.color{
background-color: #DCF3FD;
}
#context-menu-icon{
color: #424242;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
#image {
height: 16px;
border: 0px;
color: #878D99;
}
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.breadcrumb-hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.breadcrumb-hr-details {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.details-section-hr{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.folder-rectangle {
height: 63px;
background-color: #FFFFFF;
border: 1px solid rgb(189, 189, 189);
border-radius: 0px;
}
.folder-selected {
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
.file-selected {
height: 63px;
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
#folder-image{
width: 29px;
height: 20px;
color: #878D99;
font-size: 30px;
}
.context-menu{
width: 197px;
height: 400px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 5px #333;
}
.context-menu-span{
padding-left: 10px;
color: #424242;
}
.btn{
background-color: none;
border: none;
color: grey;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.folder-name-style{
text-align: left;
margin-bottom: 0px;
margin-top: 13px;
margin-left: 15px;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.folder-size-style{
text-align: left;
margin-left: 15px;
margin-bottom: 13px;
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
color: #9E9E9E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}
#no-padding{
padding: 0px;
}
#grid-view{
overflow-y: scroll;
}
#grid-view::-webkit-scrollbar {
width: 1em;
}
#grid-view::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#grid-view::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
<template>
<div>
<div class="content" style="padding-top: 3px;" id="show">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">
Files
</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
<button v-if="!detailsSectionOpen" class="btn" id="infoButton" #click="openDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
<div>
<!-- Grid view secation begins here -->
<grid-view v-if="gridView === true" :folders="folders" :recentFiles="recentFiles" id="grid-view" >
</grid-view>
<!-- List View section begins here -->
<list-view v-if="gridView === false" :folders="folders" :recentFiles="recentFiles">
</list-view>
</div>
</div>
</div>
<details-view v-if="detailsSectionOpen" id="details"></details-view>
</div>
</template>
I am trying to develop a scrollbar for the id="show", such that the content between the 2 bars is scrollable, but I am unable to so so.
Can someone please help me out here? I'd really appreciate any help. Thanks!

set a fixed height and use the overflow-y, a example:
#show {
height: 600px;
overflow-y: scroll;
}

Onload radio option doesn't work properly

I have the following script & code for my pricing tables. Everything works fine except 1 moment. My pricing value changes by clicking on radio buttons. But when the page is reloaded, it always loads the value of the first button's pricing and I want to load the second radio button values. My js knowledge is very poor, sorry for that.
I've tried to use this code $('input:radio[name="optradio"]').filter('[value="discount"]').attr('checked', true);
but that didn't help unfortunately.
$('input:radio[name="optradio"]').filter('[value="discount"]').attr('checked', true);
jQuery(function() {
$('.regular').click(function() {
$('.value-1').html("89");
$('.value-1--with-discount').html("");
});
});
jQuery(function() {
$('.discount').click(function() {
$('.value-1').html("72");
$('.value-1--with-discount').html("<span class='value__general'><span class='wd'>$</span>69<span class='wd'>/m</span></span>");
});
});
.col__pricing-table h3 {
color: #3a434e;
font-size: 20px;
font-weight: 600;
margin: 0;
}
.col__pricing-table h4 {
color: #315f9b;
font-size: 21px;
line-height: 23px;
font-weight: 300;
max-width: 196px;
margin: 0 auto;
padding-top: 56px;
}
.col__pricing-table h4 span.regular, h2.regular {
font-weight: 400;
}
.col__pricing-table {
margin-bottom: 30px;
margin-top: 97px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
color: #fff;
line-height: 30px;
}
.col__pricing-table i {
color: #3c74bb;
font-size: 14px;
font-style: italic;
padding-bottom: 21px;
display: inline-block;
}
.col__pricing-table ul {
list-style: none;
margin-top: 22px;
text-align: center;
padding: 0 48px;
}
.col__pricing-table ul li {
cursor: pointer;
color: #3c3c3c;
font-family: "Source Sans Pro";
font-size: 14px;
font-weight: 400;
line-height: 18px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 8px;
padding-top: 9px;
}
.col__pricing-table ul li i {
margin-right: 5px;
}
.btn.btn-pricing__cta {
color: #6b86a8;
font-family: "Source Sans Pro";
font-size: 17px;
font-weight: 600;
height: 40px;
border-radius: 26px;
border: 2px solid #6b86a8;
padding: 10px 17px 9px 22px;
line-height: 17px;
}
.col__pricing-table .price {
color: #3c73ba;
font-family: "Source Sans Pro";
font-size: 30px;
font-weight: 700;
letter-spacing: -0.72px;
margin: 23px 0 3px;
}
.col__pricing-table .price span.value {
font-size: 52px;
}
.col__pricing-table .type {
background-color: #52E89E;
padding: 50px 20px;
font-weight: 900;
text-transform: uppercase;
font-size: 30px;
}
.col__pricing-table .pricing-footer {
padding: 20px;
}
.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
padding-left: 0;
padding-right: 0;
}
.col__pricing-table.popular {
margin-top: 10px;
}
.col__pricing-table.popular .price {
padding-top: 80px;
}
.custom-container {
max-width: 901px;
margin: 0 auto !important;
}
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="radio-wrapper">
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="regular" type="radio" name="optradio">pagamento mensal
<span class="checkmark"></span>
</label>
</div>
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="discount" type="radio" name="optradio" value="discount">pagamento anual (10% de desconto)
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="col__pricing-table db-attached">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="db-wrapper">
<div class="pricing__left">
<h3>Plano A</h3>
<div class="value-1--with-discount"></div>
<div class="price">
R$<span class="value value-1">89</span>/mês
</div>
<i>por profissional de saúde</i>
<ul class="pricing__features">
<li>Agenda</li>
<li>Cadastro de Pacientes</li>
<li>Prontuário Eletrônico</li>
</ul>
</div>
</div>
</div><!-- first col ends -->
</div>

You need to trigger click event with $('input:radio[name="optradio"][value="discount"]').trigger('click'); because you have change the price value on click.
//$('input:radio[name="optradio"]').filter('[value="discount"]').attr('checked', true);
jQuery(function() {
$('.regular').click(function() {
$('.value-1').html("89");
$('.value-1--with-discount').html("");
});
});
jQuery(function() {
$('.discount').click(function() {
$('.value-1').html("72");
$('.value-1--with-discount').html("<span class='value__general'><span class='wd'>$</span>69<span class='wd'>/m</span></span>");
});
$('input:radio[name="optradio"][value="discount"]').trigger('click');
});
.col__pricing-table h3 {
color: #3a434e;
font-size: 20px;
font-weight: 600;
margin: 0;
}
.col__pricing-table h4 {
color: #315f9b;
font-size: 21px;
line-height: 23px;
font-weight: 300;
max-width: 196px;
margin: 0 auto;
padding-top: 56px;
}
.col__pricing-table h4 span.regular, h2.regular {
font-weight: 400;
}
.col__pricing-table {
margin-bottom: 30px;
margin-top: 97px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
color: #fff;
line-height: 30px;
}
.col__pricing-table i {
color: #3c74bb;
font-size: 14px;
font-style: italic;
padding-bottom: 21px;
display: inline-block;
}
.col__pricing-table ul {
list-style: none;
margin-top: 22px;
text-align: center;
padding: 0 48px;
}
.col__pricing-table ul li {
cursor: pointer;
color: #3c3c3c;
font-family: "Source Sans Pro";
font-size: 14px;
font-weight: 400;
line-height: 18px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 8px;
padding-top: 9px;
}
.col__pricing-table ul li i {
margin-right: 5px;
}
.btn.btn-pricing__cta {
color: #6b86a8;
font-family: "Source Sans Pro";
font-size: 17px;
font-weight: 600;
height: 40px;
border-radius: 26px;
border: 2px solid #6b86a8;
padding: 10px 17px 9px 22px;
line-height: 17px;
}
.col__pricing-table .price {
color: #3c73ba;
font-family: "Source Sans Pro";
font-size: 30px;
font-weight: 700;
letter-spacing: -0.72px;
margin: 23px 0 3px;
}
.col__pricing-table .price span.value {
font-size: 52px;
}
.col__pricing-table .type {
background-color: #52E89E;
padding: 50px 20px;
font-weight: 900;
text-transform: uppercase;
font-size: 30px;
}
.col__pricing-table .pricing-footer {
padding: 20px;
}
.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
padding-left: 0;
padding-right: 0;
}
.col__pricing-table.popular {
margin-top: 10px;
}
.col__pricing-table.popular .price {
padding-top: 80px;
}
.custom-container {
max-width: 901px;
margin: 0 auto !important;
}
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="radio-wrapper">
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="regular" type="radio" name="optradio">pagamento mensal
<span class="checkmark"></span>
</label>
</div>
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="discount" type="radio" name="optradio" value="discount">pagamento anual (10% de desconto)
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="col__pricing-table db-attached">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="db-wrapper">
<div class="pricing__left">
<h3>Plano A</h3>
<div class="value-1--with-discount"></div>
<div class="price">
R$<span class="value value-1">89</span>/mês
</div>
<i>por profissional de saúde</i>
<ul class="pricing__features">
<li>Agenda</li>
<li>Cadastro de Pacientes</li>
<li>Prontuário Eletrônico</li>
</ul>
</div>
</div>
</div><!-- first col ends -->
</div>

Your cost update is triggering on click, not when it is selected via JS. Also, its happening before you set the onclick attribute (you do this onload). Try this:
jQuery(function() {
$('.regular').click(function() {
$('.value-1').html("89");
$('.value-1--with-discount').html("");
});
});
jQuery(function() {
$('.discount').click(function() {
$('.value-1').html("72");
$('.value-1--with-discount').html("<span class='value__general'><span class='wd'>$</span>69<span class='wd'>/m</span></span>");
});
});
jQuery( function(){$('input:radio[name="optradio"]').filter('[value="discount"]').click();});
.col__pricing-table h3 {
color: #3a434e;
font-size: 20px;
font-weight: 600;
margin: 0;
}
.col__pricing-table h4 {
color: #315f9b;
font-size: 21px;
line-height: 23px;
font-weight: 300;
max-width: 196px;
margin: 0 auto;
padding-top: 56px;
}
.col__pricing-table h4 span.regular, h2.regular {
font-weight: 400;
}
.col__pricing-table {
margin-bottom: 30px;
margin-top: 97px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
color: #fff;
line-height: 30px;
}
.col__pricing-table i {
color: #3c74bb;
font-size: 14px;
font-style: italic;
padding-bottom: 21px;
display: inline-block;
}
.col__pricing-table ul {
list-style: none;
margin-top: 22px;
text-align: center;
padding: 0 48px;
}
.col__pricing-table ul li {
cursor: pointer;
color: #3c3c3c;
font-family: "Source Sans Pro";
font-size: 14px;
font-weight: 400;
line-height: 18px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 8px;
padding-top: 9px;
}
.col__pricing-table ul li i {
margin-right: 5px;
}
.btn.btn-pricing__cta {
color: #6b86a8;
font-family: "Source Sans Pro";
font-size: 17px;
font-weight: 600;
height: 40px;
border-radius: 26px;
border: 2px solid #6b86a8;
padding: 10px 17px 9px 22px;
line-height: 17px;
}
.col__pricing-table .price {
color: #3c73ba;
font-family: "Source Sans Pro";
font-size: 30px;
font-weight: 700;
letter-spacing: -0.72px;
margin: 23px 0 3px;
}
.col__pricing-table .price span.value {
font-size: 52px;
}
.col__pricing-table .type {
background-color: #52E89E;
padding: 50px 20px;
font-weight: 900;
text-transform: uppercase;
font-size: 30px;
}
.col__pricing-table .pricing-footer {
padding: 20px;
}
.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
padding-left: 0;
padding-right: 0;
}
.col__pricing-table.popular {
margin-top: 10px;
}
.col__pricing-table.popular .price {
padding-top: 80px;
}
.custom-container {
max-width: 901px;
margin: 0 auto !important;
}
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="radio-wrapper">
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="regular" type="radio" name="optradio">pagamento mensal
<span class="checkmark"></span>
</label>
</div>
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="discount" type="radio" name="optradio" value="discount">pagamento anual (10% de desconto)
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="col__pricing-table db-attached">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="db-wrapper">
<div class="pricing__left">
<h3>Plano A</h3>
<div class="value-1--with-discount"></div>
<div class="price">
R$<span class="value value-1">89</span>/mês
</div>
<i>por profissional de saúde</i>
<ul class="pricing__features">
<li>Agenda</li>
<li>Cadastro de Pacientes</li>
<li>Prontuário Eletrônico</li>
</ul>
</div>
</div>
</div><!-- first col ends -->
</div>

Onclick function not working on first click

I have created a side popup in my website, but I have an issue. It works fine, but only on the second click. I want it to work on the first click. When I click on it two times, it works. I already tried some other blogs tricks but it's not working.
What's going wrong?
I created it using simple JS, you can see my code below:
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
View on Codepen

Your code checks for a style attribute of right:-300px. Since there is no style attribute on #popup on load, the first click only sets a style attribute of right:-300px. Then, the second click sets it to "0", etc.
Note that style references the element's inline style and does not reference CSS applied by class.
I had some success by setting a default style attribute of -300px.
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup" style="right:-300px">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Alternatively, you could use getComputedStyle to find the right property set in your stylesheet.
function openNav() {
navMenuStatus = window.getComputedStyle(document.getElementById('popup'), null).getPropertyValue('right');
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Perhaps better yet, use toggle() to toggle the element's CSS class in classList, as recommended by Arash Kazemi.
var trigger = document.getElementById('popup_trigger');
var popup = document.getElementById('popup');
function openNav() {
popup.classList.toggle('hide');
}
trigger.addEventListener('click', openNav);
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: 0;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
.popup.hide {
right: -300px;
}
<div class="popup hide" id="popup">
<div class="pmenu" id="popup_trigger">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>

Because document.getElementById('popup').style.right is empty the first time you read it. The rule is not set for the element with id popup, instead it is set for the element with class popup.
A dirty quick solution would be checking for its equality with "0px". But a better way would be defining a class name .opened-popup with right equal to 0px. Then toggle that class on click. Like this:
function openNav() {
document.getElementById('popup').classList.toggle("opened-popup");
}
Look at this for a good solution:
https://codepen.io/anon/pen/EpyWQm

How to make width of nested CSS elements all the same?

Below is my implementation of some HTML and CSS that I created. I am having trouble with the width of some buttons within my container div. I want it so that somehow I can always ensure that width of the button elements are always 50% of what the div that it is in. This is the image I wanted to recreate:
https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png
Here is my attempt:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 100px;
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 100px;
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
The problem I am having is with the save-button and share-button, but also the give-button and giving-input classes. I don't necessarily want to hard code the width here to make it so that they align properly. Rather, if there is a programmatic way so that I can set them to width: 50% of the parent div, as opposed to hard coding the widths that would be great. I tried to set the class .give {width: 100%} and then set the .giving-input, .give-button, .save-button, .share-button: {width: 50%} but that didn't work for me. Any tips or help would be appreciated. Thanks!

If you set all inputs/buttons width to 49% and remove the margin-left you had there everything should work (I also changed one of your containers from inline-block back to block to make sure it takes 100% of the width).
Here is the fix to your code:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 49%;
font-weight: bold;
padding: 10px;
}
.give {
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 49%;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50" />
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>

you can split that in to 2 pieces ,each have width 50%.but here also applying a padding of 10px ,so you can use the function calc(50% - 10px); to get the exact value.
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: calc(50% - 10px);
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: calc(50% - 10px);
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>