I'm trying to write a script that if a parent element has a chlid then add class onlick, here's what i've got so far. any help would be much appreciated, p.s i know much code is terrible: The parent element is ".pinGrid" and the child is "#pin" and the onclick is "#like"
NOTE: I'm trying to add the class to the child element. The pin boxes are on a for each loop.
JS:
$(document).ready(function(){
$("#like").click(function () {
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
});
});
HTML:
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>
You can just use the ID selector to get the child element, then use toggleClass() with the checked status
$(document).ready(function() {
$(".like").change(function() {
$(this).closest('.pin').toggleClass("pincard-checked", this.checked);
});
});
.pincard-checked {
background-color: lightgrey;
}
.pin {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
</div>
</div>
I am assuming that, if .pinGrid has #pin, you want to fire click() of #like, if thats so,
$(document).ready(function(){
$("#like").click(function () {
//YOUR ACTION
});
($('.pinGrid #pin').length>0)?$("#like").trigger("click"):alert("NOT FOUND");
//IF YOU WANT TO ADD CLASS
//($('.pinGrid #pin').length>0)?$("#pin").addClass("pincard-checked"):alert("NOT FOUND");
});
You need to use:
var pingrid= $('.pinGrid');
$("#like").click(function () {
if(pingrid.hasClass( "#pin" ))
pingrid.find('#pin').toggleClass("pincard-checked");
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.my_class {
color:red;
}
</style>
<script>
$(document).ready(function () {
$("#like").click(function () {
if ($('.pinGrid #pin1').length > 0) {
$('.pinGrid #pin1').toggleClass("my_class")
}
});
});
</script>
<body>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>
</body>
</html>
You just need to replace
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
with
$('.pinGrid').find( ".pin" ).toggleClass("pincard-checked");
Here is the fiddle link
Related
I have 2 columns with same ID, each have 1 button. How to run a function when one button is clicked without changing other ID values?
Here is my code:
<div class="row">
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
</div>
Here is my function:
<script>
function price(){
var qty = document.getElementById("jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
document.getElementById("hrg").innerHTML = prc;
document.getElementById("per").innerHTML = "/" + qty;
}
</script>
The problem here is that function only runs on 'column 1' & doesn't work on 'column 2'.
Where exactly am I going wrong?
id should be unique in the same document. Use classes or other attributes instead of id.
If you want centralized function to handle clicks, submit the clicked element itself to that function, so it would know which column was clicked:
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div class="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div class="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input class="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price(this);">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
function price(el){
const elContainer = el.closest(".container");// find parent
var qty = elContainer.querySelector(".jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
elContainer.querySelector(".hrg").innerHTML = prc;
elContainer.querySelector(".per").innerHTML = "/" + qty;
}
Note, that all id were replaced by class attribute and in javascript instead of searching entire document with document.getElementById() it's now only searching children inside the .container element.
I have a UL with API generated LI's(users). Inside each user, there is a hidden container with inputs for adding tags to search by. These hidden containers are supposed to show on ONLY the selected user when you click a "+" pseudo-button.
I had it working to toggle the hide class, but it toggles on every generated class, and not the specific user I click on.
jQuery Code:
$(".fa-plus").on("click", (() =>{
$("#tag-container, #add-tag-input, #hideGrades",() => {
$(this).toggleClass("hidden");
});
}));
HTML code:
<div id="hideGrades">
<p class="card-text hidden">Grades: <%= grades %></p>
</div>
<div class="tag-container hidden" id="tag-container">
</div>
<div>
<input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>
Full Div:
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title"><%=student["firstName"] + " " + student["lastName"] %> <i class="fas fa-plus"></i></h2>
<div>
<p class="card-text">Email: <%= student["email"] %></p>
<p class="card-text">Company: <%= student["company"] %></p>
<p class="card-text">Skill: <%= student["skill"] %></p>
</p>
<div id="hideGrades">
<p class="card-text hidden">Grades: <%= student["grades"] %></p>
</div>
<div class="tag-container hidden" id="tag-container">
</div>
<div>
<input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>
</div>
</div>
</div>
Thanks!
You can amend your HTML you make it more easy and simply use jQuery functions like parent() and siblings() to show the items where you click at only and not all classes in your DOM.
Also you do not need to use arrow functions and this => in jQuery it will make things complicated.
You can simply use function to do the same thing.
Run snippet below to see working (Click on + sign so the hidden fields are displayed for each student)
$(".fa-plus").on("click", function(){
$(this).parent().siblings('.grades_section').toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Student 1 <i class="fa fa-plus"></i></h2>
<div>
<p class="card-text">Email: Email
</p>
<p class="card-text">Company: Company
</p>
<p class="card-text">Skill: Skill
</p>
</p>
</div>
<div class="grades_section hidden">
<div id="hideGrades">
<p class="card-text ">Grades: grades</p>
</div>
<div class="tag-container" id="tag-container">
Some Data
</div>
<div>
<input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Student 2 <i class="fa fa-plus"></i></h2>
<div>
<p class="card-text">Email: Email
</p>
<p class="card-text">Company: Company
</p>
<p class="card-text">Skill: Skill
</p>
</p>
</div>
<div class="grades_section hidden">
<div id="hideGrades">
<p class="card-text ">Grades: grades</p>
</div>
<div class="tag-container" id="tag-container">
Some Data
</div>
<div>
<input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
</div>
</div>
</div>
</div>
$(".delete").click(function () {
$(".delete").parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
In this code when I click on delete it deletes all. How to fix this problem?
It's a todo list code. I tried to solve using for loop, but didn't work.
Use the following:
$(".delete").click(function () {
// This will delete the parent of element being clicked
$(this).parent().remove();
});
$(".delete").click(function () {
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
It's dangerous to go with class alone. Take "this":
$(".delete").click(function () {
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
Because what you wrote tells the page to delete the parent of ALL the ".delete", whereas you want just the element clicked ($(this)).
you are calling on all elements with delete class and performing on all of them the chained actions. Another possible syntax would be calling the target element on the click event object : $(event.target).parent().remove().
This question already has answers here:
Have addEventListener on multiple of the same IDs
(2 answers)
Closed 2 years ago.
I have two radio buttons and I want to attach some functionality to them. But no matter how hard I try I can't attach anything to each of them. I tried to add a simple console log and it seems that the issue is the on click events do not work at all. the code is at the very end of the HTML code. What I'm missing and how to fix this...???
Here is the code: The Javascript is placed in a script tag at the end of the HTML code:
Note: I can log the radio buttons. as you see...
<!DOCTYPE html>
<!-- saved from url=(0043)http://thetheme.io/thesaas/demo/saas-2.html -->
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- Styles -->
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.css" rel="stylesheet">
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/style.css" rel="stylesheet">
</head>
<body>
<!-- Main Content -->
<main>
<section id="section-pricing" class="section bg-gray">
<div class="container pricing-plans-regular">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" type="radio" name="pricing" value="monthly" autocomplete="off" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" type="radio" name="pricing" value="yearly" autocomplete="off"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Plus</p>
<br>
<h2 class="price">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="12.5" data-yearly="120">12.5</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Everything in Free & Standard, and</small><br>
<small>SAML-based single sign-on (SSO)</small><br>
<small>Compliance Exports of all messages</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
<!-- Second one -->
<div class="container pricing-plans-individual">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" class="switch-input" type="radio" name="plan" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" class="switch-input" type="radio" name="plan"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Scripts -->
<script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.js.download"></script>
<!-- <script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/script.js.download"></script>
-->
<script type="text/javascript">
document.querySelector(".pricing-plans-regular").setAttribute('style', 'display:none !important');
const toggleRegular = document.querySelector("#pricing-toggle--regular");
const toggleProfessional = document.querySelector("#pricing-toggle--professional");
console.log(toggleRegular, toggleProfessional);
toggleRegular.onclick = function() {
console.log('toggleRegular')
};
toggleProfessional.onclick = function() {
console.log('toggleProfessional')
};
</script>
</body>
</html>
You're using multiple ID instead of Class. IDs are meant to be unique.
Use class . selector
Use Element.querySelectorAll()
const toggleProfessional = document.querySelectorAll(".pricing-toggle--professional");
const togProf = (ev) => {
console.log(`${ev.target.name} says: ${ev.target.value}`);
};
toggleProfessional.forEach(el => el.addEventListener("change", togProf));
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="1"> aaa 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="2"> aaa 2</label>
<hr>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="1"> bbb 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="2"> bbb 2</label>
I'm trying to create a box that is created without IDs.
I mean a box that slide out when I press on a button (also without IDs) and every other "moreinfo" text should not slide down.
Here is a example where I use IDs.
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){ //Only a smooth scroll funtion
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('#box1_more_btn').click(function() {
if($('#box1_more').css('display') == 'none') {
$('#box1_more_btn').text("less");
$('#box1_more').slideDown(400);
} else {
$('#box1_more_btn').text("more");
$('#box1_more').slideUp(400);
}
});
$('#box2_more_btn').click(function() {
if($('#box2_more').css('display') == 'none') {
$('#box2_more_btn').text("less");
$('#box2_more').slideDown(400);
} else {
$('#box2_more_btn').text("more");
$('#box2_more').slideUp(400);
}
});
.moreinfo {
display:none;
}
#box_1 {
color: black;
background-color: #F2F2F2;
}
#box1_more {
background-color: rgba(0,0,0,0.008)
}
#box_2 {
color: black;
background-color: #F2F2F2;
}
#box2_more {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div id="box_1" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span id="box1_more_btn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo" id="box1_more">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br /><br /><br />
<div id="box_2" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
Second box ... more<!-- This Button should also rename--> !
</p>
</div>
</div>
</div>
<div id="box2_more" class="container moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the second more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-2 end-->
</div>
</body>
So I imagine it without IDs.
I tried that, but do not know how to go
This is my attemp without using IDs:
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('.morebtn').click(function() {
if($('.moreinfo').css('display') == 'none') {
$('.morebtn').html(' less '); // Is it possible too, that the window scroll down to "this" div?
$('.box_moreinfo').slideDown(400);
} else {
$('.morebtn').html(' more ');
$('.box_moreinfo').slideUp(400);
}
});
.moreinfo {
display:none;
}
.box {
color: black;
background-color: #F2F2F2;
}
.box_moreinfo {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br />Now, both boxes slideOut on click...<br /><br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div><!-- BOX-2 end-->
</div>
</body>
Just looking at your markup you've made life quite difficult for yourself!
If this were something I was doing I'd make the relationship more explicit in the HTML:
<section class="has-more-info">
<h1>Header</h1>
<p>
Text here...
</p>
<button class="show-more-info">Show more</button>
<div class="more-info hidden">
<h3>More Info</h3>
<p>This is the first more Info box</p>
</div>
</section>
Then you could use:
$('.has-more-info').each( function() {
$(this).find('.show-more-info').click( function(e) {
e.preventDefault();
$(this).siblings('.more-info').slideToggle();
});
});
You need to style the .hidden class as display:none; initially, or onload so as to not impede non-JS users.
I haven't tested this but the concept should get you going.