Hello i want to select the first item in a list by default.So when i open the view i want the item Plafond sécurité sociale under Général to be selected by default.
$("#général").val($("#général a:first").selectedIndex());
<div class="col-12">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px;">
<div class="col-sm">
<div class="row" data-toggle="collapse" data-target="#général" style="cursor:pointer">
<span class="user" style="font-weight:bold">Général</span>
</div>
</div>
<div class="col-sm">
<div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#général" style="float:right;margin-right:0px">
<i class="général_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
expand_more
</i>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="général" class="collapse">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" tauxPlafonds="PSS" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Plafond sécurité sociale
</a>
<a class="mdc-list-item" tauxPlafonds="SMIC" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Smic
</a>
<a class="mdc-list-item" tauxPlafonds="CSG" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
CSG CRDS
</a>
<a class="mdc-list-item" tauxPlafonds="AGM" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
Abattement gérant majoritaire
</a>
</div>
</div>
</div>
</div>
</div>
How can i add modify my function to have a good result.
Not really sure what you are asking for, but the select the item you want and add styling of your choice.
$('.mdc-list-item')[0]
$('.mdc-list-item:first-child()')[0]
$('.mdc-list-item:first')[0]
Not sure if this is what you are looking for.
$(document).ready(function() {
$("#item1").addClass("selected");
$(".list-item").click(function() {
$(".list-item").removeClass("selected");
$(this).addClass("selected");
});
});
a {
max-width: 100px;
display: block;
margin: 5px;
padding: 5px 10px;
text-align: center;
}
a,
a:hover {
color: inherit;
text-decoration: none;
}
a:hover {
background-color: #eee;
}
a.selected {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="item1" href="#" class="list-item">Item 1</a>
<a id="item2" href="#" class="list-item">Item 2</a>
<a id="item3" href="#" class="list-item">Item 3</a>
Related
I hope your doing great. I want to add a switch that switches between "Monthly" and "Yearly". When Switched to yearly, I want the price shown to change from 9$ to 6$. I basically want a toggle switch to change text.
<!-- Pricing -->
<div class="v-line v-line-left"> <div class="container">
<div class="pricing-items row">
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Essentials </span>
</div>
<div class="icon"></div>
<div class="price">
<span>9</span><span>$</span>
<em>PM</em>
</div>
<br><br>
<label>
<input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
<span class="switch"></span>
</label>
<div class="lui-text">
<div>
<p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<em>H.W Answers & Explanations</em>
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="label">
<span> Popular </span>
</div>
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Power User </span>
</div>
<div class="icon"></div>
<div class="price">
<em><s>$12</s></em> <span> 8 <b>$</b>
</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i>H.W Answers & Explanations
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Ultimate </span>
</div>
<div class="icon"></div>
<div class="price">
<em><s>$17</s></em><span> 12 <b>$</b>
</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations
</li>
<li>
<i class="fas fa-check"></i>Weekly Revision Meetings
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
</div>
<div class="lui-bgtitle">
<span> Pricing </span>
</div>
</div>
</div>
<div class="container">
<div class="lui-heading">
<div class="container">
<div class="m-titles align-center">
<h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
<br>
<br>
<br>
<span> What are you waiting for? Join now and guarantee your A+ this year! </span>
</h2>
</div>
</div>
</section>
Thank you.
I have tried searching for a solution for hours but got no luck. I even tried chat gpt...
[UPDATED]
If i understand you right you just want to change the price by flipping a switch.
I created one and a basic JS function for it.
Greetings
[UPDATE]
Changed so it appends on all the prices and automatically divides 20% of the price down. Also changed the default "PM" to either PY or PM.
You can edit the switch I inserted as you want.
The only thing important is the function toggleyearmonth();
function toggleyearmonth() {
document.querySelectorAll(".price span").forEach(pricenum => {
if(pricenum.getAttribute("pm")){
if(pricenum.getAttribute("pm") == pricenum.innerText){
pricenum.innerText = (pricenum.getAttribute("pm") - pricenum.getAttribute("pm")/100*20).toFixed(0);
pricenum.parentNode.childNodes[4].innerText = "PY";
} else {
pricenum.innerText = pricenum.getAttribute("pm");
pricenum.parentNode.childNodes[4].innerText = "PM";
}
}
})
};
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.switch {
display: inline-block;
position: absolute;
width: 60px;
height: 34px;
margin: 0;
padding: 0;
background: #ddd;
border-radius: 20px;
position: relative;
vertical-align: middle;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
input[type="checkbox"]+.switch:before {
content: "";
width: 50px;
height: 50px;
background: #fff;
border-radius: 20px;
position: absolute;
top: -8px;
left: -5px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
input[type="checkbox"]:checked+.switch {
background: #4caf50;
}
input[type="checkbox"]:checked+.switch:before {
left: calc(100% - 30px);
}
<label>
<input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
<span class="switch"></span>
</label>
<br><br>
<!-- Pricing -->
<div class="v-line v-line-left">
<div class="container">
<div class="pricing-items row">
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Essentials </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=9>9</span><span>$</span>
<em>PM</em>
</div>
<br><br>
<div class="lui-text">
<div>
<p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<em>H.W Answers & Explanations</em>
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="label">
<span> Popular </span>
</div>
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Power User </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=12>12</span><span>$</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i>H.W Answers & Explanations
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Ultimate </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=17>17</span><span>$</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations
</li>
<li>
<i class="fas fa-check"></i>Weekly Revision Meetings
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
</div>
<div class="lui-bgtitle">
<span> Pricing </span>
</div>
</div>
</div>
<div class="container">
<div class="lui-heading">
<div class="container">
<div class="m-titles align-center">
<h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
<br>
<br>
<br>
<span> What are you waiting for? Join now and guarantee your A+ this year! </span>
</h2>
</div>
</div>
</section>
I'm with this product loop, each one has a Details box, which appears when you click "More +", but inside the loop it is showing the box of all products when I click on any one, like can i make this unique for each product?
UPDATE!
Box I want to appear:
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>
CSS:
div.keyFeaturesBox, div.viewSavingsBox {
display: none;
position: absolute;
left: 0;
bottom: 50px;
width: 100%;
height: 180px; max-height: 180px;
background-color: #f1f1f1;
box-sizing: border-box;
border: 2px solid rgba(112, 112, 112, .34);
}
Loop:
for ($i = 0; $i < count($vehicles); $i++) {
echo '<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>';
}
HTML Code:
<div class="vehicleDetails"><!-- Details start -->
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div><!-- Details end -->
jQuery code:
// Features Box Toggle
$(".keyFeatures-span").click(function() {
$(".keyFeatures").toggleClass("selectedFeatures");
$(".keyFeaturesBox").slideToggle("fast");;
});
You can use .closest() to move up the DOM tree and match any selector.
The example below is fully commented.
You didn't provide any HTML for .keyFeaturesBox so that line might need adapting, as a guess you might need to use .closest(".keyFeatures").find(".keyFeaturesBox") to move up the DOM tree to the wrapper class and then search the children for the features box. This is difficult to work out without all the HTML.
Demo
// Event trigger for click of .keyFeatures-span
$(".keyFeatures-span").click(function() {
// Move up DOM tree and apply class selectedFeatures to first match
$(this).closest(".keyFeatures").toggleClass("selectedFeatures");
// You didn't include .keyFeaturesBox in your example HTML so you might need to adapt this
$(this).closest(".keyFeaturesBox").slideToggle("fast");
});
.selectedFeatures {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vehicleDetails">
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>
<div class="vehicleDetails">
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>
I have your code running like so:
<!-- Details start -->
<div class="vehicleDetails">
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
<div class="keyFeaturesBox">
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
</div>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>
<!-- Details end -->
<script>
// Features Box Toggle
$(".keyFeatures-span").click(function() {
let $parentNode = $(this).parent('.keyFeatures');
$parentNode.toggleClass("selectedFeatures");
$parentNode.find(">.keyFeaturesBox").slideToggle("fast");
});
</script>
because of position: absolute; and the same bottom value all divs shown as overlapped and you see the only last div.
if you remove position: absolute; from your style, it will toggle all divs, but it will toggle from up to down, different than yours.
or after toggle, increase bottoms
$(".keyFeatures-span").click(function() {
$(".keyFeatures").toggleClass("selectedFeatures");
$(".keyFeaturesBox").slideToggle("fast");
$(".keyFeaturesBox").each(function(i,e){
$(this).css("bottom" , i * 180); //180 is your box height in css
});
});
div.keyFeaturesBox, div.viewSavingsBox {
display: none;
position: absolute;
left: 0;
bottom: 50px;
width: 100%;
height: 180px; max-height: 180px;
background-color: #f1f1f1;
box-sizing: border-box;
border: 2px solid rgba(112, 112, 112, .34);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vehicleDetails"><!-- Details start -->
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive1</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive2</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive3</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>
I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>
When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.
Ok, So I have a navbar that, when a link is clicked, I want it to move to a specific div (i.e. when clicking the "About" link, the page moves to the About section of the page).
A JSFiddle of the Code in question:
HTML in question:
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
The plan is to add classes that would match the id names of the parts of the page I want to go to.
Here is the JS I have so far:
function main() {
$
$('.nav-item').on('click', function() {
$(this).toggleClass('active');
});
}
$(document).ready(main);
Note, I am using Bootstrap 4.0. Any help is much appreciated.Thanks in advance!
Here is a solution with smooth scrolling (the jquery slim libs does not support the animate property)
Snippet below
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
body {
background: #f5f5dc;
}
.jumbotron {
text-align: center;
background: url(imgs/los-angeles-skyline.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
border-radius: 0;
}
#bootstrap-link {
text-decoration: none;
color: white;
}
#bootstrap-link:hover {
text-decoration: underline;
color: #014c8c;
}
#info-cards {
margin-bottom: 20px;
padding-bottom: 5px;
}
#card-blocks {
padding-bottom: 20px;
margin-bottom: 20px;
}
.card-button {
margin-left: 5px;
margin-right: 5px;
}
#form-container {
border: 5px solid rgba(220, 220, 220, 0.4);
margin-top: 10px;
padding: 30px;
padding-bottom: 25px;
background: #ffffff;
}
.form-button {
margin-top: 20px;
}
.footer {
text-align: center;
background-color: #292b2c !important;
padding-bottom: 5px;
padding-top: 20px;
margin-top: 5px;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Welcome!</h1>
<p class="lead">This is a site to which I will be adding all of my website works.</p>
<hr class="my-4">
<p>This site uses Bootstrap 4 to make the site visually pleasing.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="container-fluid" id="About">
<div class="row">
<div class="col-sm-12 div.md-12" id="info-cards About">
<div class="card">
<h3 class="card-header">About the <strong>Developer</strong></h3>
<div class="card-block">
<div class="media">
<img class="d-flex mr-3" src="https://avatars1.githubusercontent.com/u/17634751?v=3&u=764e15995bb82b2f37a3bdb15ba59e11f038a2f1&s=400" alt="githubProfilePic">
<div class="media-body">
<h5 class="mt-0">Welcome to My Portfolio!</h5>
Hello there! This is a personal portfolio of all of my works will be open source and can be changed however you please. Just make sure to provide links to the frameworks used so others can create projects with them!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="card-blocks projects projects">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #1
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Featured: "Just Random Musing..."
</div>
<div class="card-block">
<h4 class="card-title">My First Site W/ Bootstrap!</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
View the Site!
View Source!
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #2
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="skillbars">
<div class="card">
<h3 class="card-header">Featured Skills</h3>
<div class="card-block">
<p class="card-text">HTML</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>
<br>
<p class="card-text">CSS</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
<br>
<p class="card-text">JavaScript</p>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
</div>
</div>
</div>
</div>
<form class="container-fluid" id="contact">
<div id="form-container">
<div class="form-group row">
<label for="InputName" class="col-4 col-form-label">Full Name</label>
<div class="col-8">
<input type="name" class="form-control" id="InputName" aria-described-by="nameHelp" placeholder="Enter Name" />
<small id="nameHelp" class="form-text text-muted">Please enter your Full Name (First and Last)</small>
</div>
</div>
<div class="form-group row">
<label for="InputEmail" class="col-4 col-form-label">Email Address</label>
<div class="col-8">
<input type="email" class="form-control" id="InputEmail" aria-described-by="emailHelp" placeholder="Enter Email" />
<small id="emailHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
</div>
</div>
<div class="form-group row">
<label for="exampleInputPassword1" class="col-4 col-form-label">Password</label>
<div class="col-8">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-primary form-button">Submit</button>
</div>
</form>
<footer class="footer text-muted">
<p>© 2017. David Madrigal-Hernandez.</p>
</footer>
You missed the Id, just add an Id in the section container, for your case:
<div class="container-fluid" id="About">
since in your anchor you are jumping to #About
<a class="nav-link" href="#About">About</a>
Okay I started with Bootstrap today and got some help to start getting one toggle working but I need 4 of them working properly. The problem as you see if you run the code only the first window reveals information, the second thing I need help with is to make so that went it works only one hidden text can be shown at a time, third thing I need help with is for the first hidden text to be visible on page load. * This is not a duplicate post the last solution i got worked fine but wasnt very responsive and it was quite laggy, decided to try Bootstrap and it looks very promising.
#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;}
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;}
#leftpanel a {margin-left: 230px;}
#demo { color: #333; font-size: 14px;}
.collapse {}
.testver { }
.testver hr {
}
.fa-angle-up {
display: none;
}
.testver i {
}
.testver .fa {
;
}
.arrow[aria-expanded="true"] .fa-angle-up {
display: inline-block;
}
.arrow[aria-expanded="true"] .fa-angle-down {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="leftpanel">
<div class="testver">
<h1>First title</h1>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo" class="collapse">
First text
</div>
<hr>
</div>
<div class="testver">
<h2>Second title</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo" class="collapse">
Second text
</div>
<hr>
</div>
<div class="testver">
<h2>Third title</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo" class="collapse">
Third text
</div>
<hr>
</div>
<div class="testver">
<h2>Last title</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo" class="collapse">
Last Text
</div>
<hr>
</div>
</div>
The IDs must be unique: so change #demo to #demo1, #demo2, #demo3 and #demo4 just for instance.
After clicking a div it's necessary to hide all the remaining divs:
var currTarget = $(this).closest('a').data('target').substr(1);
$('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');
In order to set open the first div it's necessary to add the collapse in property plus aria-expamded like in:
<div id="demo1" class="collapse in" aria-expanded="true">
The snippet:
$('.testver a i').on('click', function(e) {
var currTarget = $(this).closest('a').data('target').substr(1);
$('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');
});
#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;}
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;}
#leftpanel a {margin-left: 230px;}
#demo { color: #333; font-size: 14px;}
.collapse {}
.testver { }
.testver hr {
}
.fa-angle-up {
display: none;
}
.testver i {
}
.testver .fa {
;
}
.arrow[aria-expanded="true"] .fa-angle-up {
display: inline-block;
}
.arrow[aria-expanded="true"] .fa-angle-down {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="leftpanel">
<div class="testver">
<h1>First title</h1>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1" aria-expanded="true">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo1" class="collapse in" aria-expanded="true">
First text
</div>
<hr>
</div>
<div class="testver">
<h2>Second title</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo2">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo2" class="collapse">
Second text
</div>
<hr>
</div>
<div class="testver">
<h2>Third title</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo3">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo3" class="collapse">
Third text
</div>
<hr>
</div>
<div class="testver">
<h2>Last title</h2>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo4">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo4" class="collapse">
Last Text
</div>
<hr>
</div>
</div>