how to hide/show siblings div when i click on div - javascript

I have multiple divs on my webpage . When i click on parent div called singers-div it suppose to open this <p> only in this div and close <p> inside siblings divs. But it doesn't work.
note: childern() gives me an error if i try to use it. mine.js:27 Uncaught TypeError: $(...).childern is not a function
HTML
<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>
</section>
CSS
h1, h2, p {
margin: 0;
}
.singers
{
display: none;
}
.singers-head
{
cursor: pointer;
}
jQuery
$(".singers-div").click(function(){
$(this).find('p').slideDown(1000);
$(this).find('.singers').siblings('p').slideUp(1000);
})


You could do it like this:
$(".singers-div").click(function() {
if ($(this).find('p').css("display") == "none") {
let singers = $(".singers").not(this);
singers.each(function() {
if ($(this).css("display") == "block") {
$(this).slideUp(1000);
}
});
$(this).find('p').slideDown(1000);
} else {
$(this).find('p').slideUp(1000);
}
})
h1, h2, p {
margin: 0;
}
.singers
{
display: none;
}
.singers-head
{
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>
</section>


In this line:
$(this).find('.singers').siblings('p').slideUp(1000);
.siblings only applies to elements that have the same parent - not at the same "level" (cousins if you like). In your HTML each of the .singers is in its own singers-div.
You need to go up to a common parent then find all the p.singers to hide them:
$(this).closest(".container").find('p.singers')
$(".singers-div").click(function() {
$(this).closest(".container").find('p.singers').slideUp(1000);
$(this).find('p').slideDown(1000);
})
h1,
h2,
p {
margin: 0;
}
.singers {
display: none;
}
.singers-head {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>
</section>
EDIT for completeness, you can exclude the "current" one depending on your requirements (most likely not having it pop up and down immediately - but it may be that you want it to hide on 2nd click, so keep a variable with the "current" paragraph and exclude it as required)
$(".singers-div").click(function() {
var current = $(this).find('p').slideDown(1000);
$(this).closest(".container").find('p.singers').not(current).slideUp(1000);
})
h1,
h2,
p {
margin: 0;
}
.singers {
display: none;
}
.singers-head {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>
</section>

Related

How to Select All Id in HTML Page

I want to select all Id in HTML page. But it's not happening. My code is working at first element.
I used querySelector, querySelectorAll, getElementById, GetElementByClassName but everytime my code run at first Id
//* DOM
let plusIconDOM = document.querySelector(".plusIcon")
let minusIconDOM = document.querySelector(".minusIcon")
let cardTextDOM = document.querySelector("#cardText")
minusIconDOM.addEventListener("click", function() {
plusIconDOM.classList.remove("d-none")
cardTextDOM.classList.add("d-none")
minusIconDOM.classList.add("d-none")
})
plusIconDOM.addEventListener("click", function() {
minusIconDOM.classList.remove("d-none")
cardTextDOM.classList.remove("d-none")
plusIconDOM.classList.add("d-none")
})
<card class="card mx-auto">
<div class="card-body">
<p class="card-title h5">Lorem ipsum dolor sit amet.</p>
<p class="card-text d-inline" id="cardText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae
consequatur minima obcaecati iusto eos blanditiis deleniti?</p>
<button class="btn float-end">
<img width="25px" class="d-none plusIcon" src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt="">
</button>
<button class="btn float-end">
<img width="25px" class="minusIcon" src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt="">
</button>
</div>
</card>
<card class="card mx-auto">
<div class="card-body">
<p class="card-title h5">Lorem ipsum dolor sit amet.</p>
<p class="card-text d-inline" id="cardText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae
consequatur minima obcaecati iusto eos blanditiis deleniti?</p>
<button class="btn float-end">
<img width="25px" class="d-none plusIcon" src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt="">
</button>
<button class="btn float-end">
<img width="25px" class="minusIcon" src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt="">
</button>
</div>
</card>
<card class="card mx-auto">
<div class="card-body">
<p class="card-title h5">Lorem ipsum dolor sit amet.</p>
<p class="card-text d-inline" id="cardText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae
consequatur minima obcaecati iusto eos blanditiis deleniti?</p>
<button class="btn float-end">
<img width="25px" class="d-none plusIcon" src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt="">
</button>
<button class="btn float-end">
<img width="25px" class="minusIcon" src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt="">
</button>
</div>
</card>

IDs need to be unique
If you delegate you do not NEED IDs
document.getElementById("wrapper").addEventListener("click", function(e) {
const tgt = e.target;
const isPlus = tgt.matches(".plusIcon");
const isMinus = tgt.matches(".minusIcon");
if (!isPlus && !isMinus) return // not one of the plus or minus
const parent = tgt.closest(".card-body");
let plusIconDOM = parent.querySelector(".plusIcon");
let minusIconDOM = parent.querySelector(".minusIcon");
let cardTextDOM = parent.querySelector(".card-text");
plusIconDOM.classList.toggle("d-none", isPlus);
cardTextDOM.classList.toggle("d-none", isMinus);
minusIconDOM.classList.toggle("d-none", isMinus);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" />
<div id="wrapper">
<card class="card mx-auto">
<div class="card-body">
<p class="card-title h5">Lorem ipsum dolor sit amet.</p>
<p class="card-text d-inline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae consequatur minima obcaecati iusto eos blanditiis deleniti?</p><button class="btn float-end"><img width="25px" class="d-none plusIcon" src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt=""></button><button class="btn float-end"><img width="25px" class="minusIcon" src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt=""></button>
</div>
</card>
<card class="card mx-auto">
<div class="card-body">
<p class="card-title h5">Lorem ipsum dolor sit amet.</p>
<p class="card-text d-inline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae consequatur minima obcaecati iusto eos blanditiis deleniti?</p><button class="btn float-end"><img width="25px" class="d-none plusIcon" src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt=""></button><button class="btn float-end"><img width="25px" class="minusIcon" src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt=""></button>
</div>
</card>
<card class="card mx-auto">
<div class="card-body">
<p class="card-title h5">Lorem ipsum dolor sit amet.</p>
<p class="card-text d-inline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae consequatur minima obcaecati iusto eos blanditiis deleniti?</p><button class="btn float-end"><img width="25px" class="d-none plusIcon" src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt=""></button><button class="btn float-end"><img width="25px" class="minusIcon" src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt=""></button>
</div>
</card>
</div>

You don't bind addEventListener for every elements. Better approach is
i) wrap the card contents into a single parent Dom.
ii) Add click event Listener for the parent Dom, provide id and purpose attribute for + and - icon.
iii) Inside the click handler function do actions based on the event.target.id and event.target.getAttribute("purpose").
Hope this will resolve your usecase.

you can try this :
document.querySelectorAll('*[id]')

How do I sort Materialize Cards into categories?

I know how to style the buttons for Materialize cards, but I was wondering how I would go about sorting them by category. For example, one section is hot coffee while the other is for cold coffee. I wanted to make buttons above the cards that when clicked, would filter out the other items but the button that was clicked, but I am not sure how to go about doing that in materialize.
<!-- Recipe Cards Setup Start -->
<div class ="container">
<div class="row">
<div class="col 14 m4 s10">
<div class="card sticky-action">
<div class ="card-image">
<img src ="coffee.jpg"class="materialboxed">
<span class ="red-text card-title">HOT COFFEE</span>
<a class ="btn brown btn-floating halfway-fab pulse activator">+</a>
</div>
<div class ="card-content">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsum quae optio, nulla temporibus a error, cupiditate fugiat reiciendis qui nihil illum quasi?
Tempore mollitia, officia quod adipisci architecto repellendus a!</p>
</div>
<div class ="card-reveal">
<span class="card-title">Ingredients<i class="right">x</i></span>
<p>Ingredients: Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsum quae optio, nulla temporibus a error, cupiditate fugiat reiciendis qui nihil illum quasi?
Tempore mollitia, officia quod adipisci architecto repellendus a!</p>
</div>
<div class ="card-action">
<div class ="center">
Ingredients
<div class="card-delete">
<i class="large material-icons"><button>delete_outline</i></button>
</div>
</div>
</div>
</div>
</div>
<div class="col 14 m4 s10">
<div class="card sticky-action">
<div class ="card-image">
<img src ="coffee.jpg" class="materialboxed">
<span class ="red-text card-title">ICED COFFEE</span>
<a class ="btn brown btn-floating halfway-fab pulse activator">+</a>
</div>
<div class ="card-content">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsum quae optio, nulla temporibus a error, cupiditate fugiat reiciendis qui nihil illum quasi?
Tempore mollitia, officia quod adipisci architecto repellendus a!</p>
</div>
<div class ="card-reveal">
<span class="card-title">Ingredients<i class="right">x</i></span>
<p>Ingredients: Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsum quae optio, nulla temporibus a error, cupiditate fugiat reiciendis qui nihil illum quasi?
Tempore mollitia, officia quod adipisci architecto repellendus a!</p>
</div>
<div class ="card-action">
<div class ="center">
Ingredients
<div class="card-delete">
<i class="large material-icons"><button>delete_outline</i></button>
</div>
</div>
</div>
</div>
</div>
<div class="col 14 m4 s10">
<div class="card sticky-action">
<div class ="card-image">
<img src ="coffee.jpg" class="materialboxed">
<span class ="red-text card-title">AMERICANO</span>
<a class ="btn brown btn-floating halfway-fab pulse activator">+</a>
</div>
<div class ="card-content">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsum quae optio, nulla temporibus a error, cupiditate fugiat reiciendis qui nihil illum quasi?
Tempore mollitia, officia quod adipisci architecto repellendus a!</p>
</div>
<div class ="card-reveal">
<span class="card-title">Ingredients<i class="right">x</i></span>
<p>Ingredients: Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsum quae optio, nulla temporibus a error, cupiditate fugiat reiciendis qui nihil illum quasi?
Tempore mollitia, officia quod adipisci architecto repellendus a!</p>
</div>
<div class ="card-action">
<div class ="center">
<a class= "btn brown btn-small">Ingredients</a>
<div class="card-delete">
<i class="large material-icons"><button>delete_outline</i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Add indicators to carousel bootstrap and hide text option

Hello i have a landing page where is carousel with information about team. I would like to add pagination to this carousel. When i add controls to this carousel they are not showing.
Also i want to change my javascript function wchich is showing more text when its too long. I would like to add option to hide it, because right now its only option to show text. I need option to also hide it. Thanks for help.
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
carousel:
<div class="container my-2" style="padding-top: 3em">
<h1 class="text-center h1 me-2">Title 2</h1>
<div class="row d-flex justify-content-center">
<div class="col-12">
<div
id="carousel"
data-interval="2000"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouse1"
data-slide-to="0"
class="active bg-dark"
></li>
<li
data-target="#carouse2"
data-slide-to="1"
class="bg-dark"
></li>
<li
data-target="#carouse3"
data-slide-to="2"
class="bg-dark"
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="karuzel1">
<div class="row">
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="card mr-3">
<img src="logo" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Title 1</h5>
<p class="card-text">
<span class="text show-read-more"
>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Sint tempore beatae neque porro suscipit
repellat unde, minus quisquam architecto voluptatum
dolorem ut nisi repellendus voluptates in rerum
quam. Ullam, est?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolore amet facere
ratione dolores quo voluptates vel assumenda odit
voluptate, ex eum alias nulla eaque! Ratione beatae
tempore dolorum vel eos Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ut deserunt ab quasi
corrupti, ipsum nesciunt. Quas cum, accusamus saepe,
non exercitationem quis vitae tempore perferendis
molestias accusantium debitis sunt blanditiis?
</span>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="card mr-3">
<img src="logo" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Title 1</h5>
<p class="card-text">
<span class="text show-read-more"
>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Sint tempore beatae neque porro suscipit
repellat unde, minus quisquam architecto voluptatum
dolorem ut nisi repellendus voluptates in rerum
quam. Ullam, est?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolore amet facere
ratione dolores quo voluptates vel assumenda odit
voluptate, ex eum alias nulla eaque! Ratione beatae
tempore dolorum vel eos Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ut deserunt ab quasi
corrupti, ipsum nesciunt. Quas cum, accusamus saepe,
non exercitationem quis vitae tempore perferendis
molestias accusantium debitis sunt blanditiis?
</span>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="card mr-3">
<img src="logo" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Title 1</h5>
<p class="card-text">
<span class="text show-read-more"
>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Sint tempore beatae neque porro suscipit
repellat unde, minus quisquam architecto voluptatum
dolorem ut nisi repellendus voluptates in rerum
quam. Ullam, est?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolore amet facere
ratione dolores quo voluptates vel assumenda odit
voluptate, ex eum alias nulla eaque! Ratione beatae
tempore dolorum vel eos Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ut deserunt ab quasi
corrupti, ipsum nesciunt. Quas cum, accusamus saepe,
non exercitationem quis vitae tempore perferendis
molestias accusantium debitis sunt blanditiis?
</span>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="card mr-3">
<img src="logo" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Title 1</h5>
<p class="card-text">
<span class="text show-read-more"
>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Sint tempore beatae neque porro suscipit
repellat unde, minus quisquam architecto voluptatum
dolorem ut nisi repellendus voluptates in rerum
quam. Ullam, est?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolore amet facere
ratione dolores quo voluptates vel assumenda odit
voluptate, ex eum alias nulla eaque! Ratione beatae
tempore dolorum vel eos Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ut deserunt ab quasi
corrupti, ipsum nesciunt. Quas cum, accusamus saepe,
non exercitationem quis vitae tempore perferendis
molestias accusantium debitis sunt blanditiis?
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript function to show more text
$(document).ready(function(){
var maxLength = 230;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' ...Show more');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
full page available on https://jsfiddle.net/3jpzv8x4/5/

Adding active class issue bootstrap tab

I'm trying to add .active class first li item for every tab but it works only just one tab why isn't work properly ? is there any property of bootstrap or do I have to do myself ? by the way I'm using bootstrap tabs
$(document).ready(function(){
$(".add-active li:first").addClass("active");
});
body{
margin:70px;
}
.tab-one,.tab-two{
float:left;
width:500px;
margin:30px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="tab-one">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>First Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Second Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Third Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam beatae incidunt magnam nesciunt corrupti architecto sequi dolorem molestias, adipisci cum earum in maxime velit quis animi ipsam unde odio aspernatur!</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Fourth Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eveniet, consectetur, totam in quam ipsum iusto voluptates, sunt sequi, dolorum minus praesentium. Mollitia obcaecati, aliquid placeat dolorum, quibusdam ex molestiae.</p>
</div>
</div>
</div>
<!-- tab one-->
<div class="tab-two">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Try</li>
<li role="presentation">Use</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="try">
<h2>Try Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="use">
<h2>Use Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
</div>
</div>
<!-- tab two-->
<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"></script>
</body>
</html>

You've to use find() instead else it will take just the first instance of the li:first :
$(document).ready(function(){
$(".add-active").find('li:first').addClass("active");
});
Hope this helps.
$(document).ready(function(){
$(".add-active").find('li:first').addClass("active");
});
body{
margin:70px;
}
.tab-one,.tab-two{
float:left;
width:500px;
margin:30px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="tab-one">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>First Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Second Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Third Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam beatae incidunt magnam nesciunt corrupti architecto sequi dolorem molestias, adipisci cum earum in maxime velit quis animi ipsam unde odio aspernatur!</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Fourth Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eveniet, consectetur, totam in quam ipsum iusto voluptates, sunt sequi, dolorum minus praesentium. Mollitia obcaecati, aliquid placeat dolorum, quibusdam ex molestiae.</p>
</div>
</div>
</div>
<!-- tab one-->
<div class="tab-two">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Try</li>
<li role="presentation">Use</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="try">
<h2>Try Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="use">
<h2>Use Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
</div>
</div>
<!-- tab two-->
<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"></script>
</body>
</html>

jQuery: fadeOut <div> element with with a close button

I am trying to build a dashboard UI where I want to be able to close some panels. I tried several ways to use the "this" keyword to avoid hard coding everything but couldn't figure it out. I'm sure there has to be a much more effective way to do what I did but I did achieve my goal.
Can anyone enlighten me on what I could do different?
HTML:
<div class="content-section col-sm-6 col-md-5" id="div1">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p>
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>
jQuery:
$(document).ready(function() {
$('div').on('click', '#close1', function () {
$('#div1').fadeOut();
});
$('div').on('click', '#close2', function () {
$('#div2').fadeOut();
});
$('div').on('click', '#close3', function () {
$('#div3').fadeOut();
});
$('div').on('click', '#close4', function () {
$('#div4').fadeOut();
});
$('div').on('click', '#close5', function () {
$('#div5').fadeOut();
});
});

Below is an example where the user clicks on .btn-close and then fades out the closest section. It's much easier to bind an event to an class instead of several id's.
Since we're listening to an event we can use $(this) within the event listener. It will return the element that was clicked (in this example the anchor). When we got the clicked element we can use [.closest][1] to find the parent element based on class. And then we can use fadeOut().
$(document).ready(function() {
// Listen to clicks on btn-close
$('.content-section').on('click', '.btn-close', function () {
// Get closest content-section and fade it out.
// $(this) will be the anchor with the class btn-close.
$(this).closest('.content-section').fadeOut();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-section col-sm-6 col-md-5" id="div1">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
<div class="cs-header"><p>HeaderX<i class="fa fa-close"></i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p>
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>

My proposal is:
$(function () {
$('div a[id^="close"]').on('click', function (e) {
var idNumber = this.id.split('').pop();
$(this).closest('#div' + idNumber).fadeOut();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="content-section col-sm-6 col-md-5" id="div1">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p>
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>

$(document).ready(function(){
$('.btn-close').click(function){
$(this).parent().fadeOut();
});
});

Categories

Resources