I tried many thigs to navigate to next div element I'm using Mousetrap for key listener and checking if there is selected item then I'm trying to find the next div but seems like can't find anything any ideas?
HTML (There are many of this div item):
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
Javascript
Mousetrap.bind("right", function() {
if($('.item-flip selected').length){
var current = $('.item-flip selected');
$('.selected').removeClass('selected');
var el = current.next();
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
I tried how to figure out a solution, in the following my snippet the code.
The points of interest are:
To select an element with two classes you need to change from $('.item-flip selected') to $('.item-flip.selected')
To get next element you need to find the clossest div father and then search for the item-flip div. So from var el = current.next(); you need to change to: var el = current.closest('.item').next().find('.item-flip');
$(function () {
Mousetrap.bind("right", function(e) {
if($('.item-flip.selected').length){
var current = $('.item-flip.selected');
$('.selected').removeClass('selected');
var el = current.closest('.item').next().find('.item-flip');
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
});
.selected {
background-color: red;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
Related
I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
I think the problem is with your CSS selector in the Jquery.
$('.item .item-location p')
should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.
Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item, you've to use closest to reach the ancestor .item
$("#location-filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('.item .item-location p').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('.item').hide();
} else {
$(this).closest('.item').show();
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
So it's hard to explain without giving an example, but I'll try my best.
So lets say my HTML looks like this:
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
So what I want is in Javascript/jQuery to get the .active-piece, then from there on count which .item it is inside of the .container element.(So 2 being the answer, considering we start counting from 0)
I know I can get the $('.active-piece'), and probably should get the parent of the parent from there but then what am I suppose to do?
Maybe I'm thinking too difficult, but I can't seem to figure out how to do get the expected result. Does anyone know how to?
Basically you want to get index of the item element that has child element at some level with the class active-piece. To do that you could use closest method to get parent with class item and then get index of that element
$('.active-piece').closest('.item').index();
const index = $('.active-piece').closest('.item').index();
console.log(index)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
I know there are examples above, but they all use jQuery. So I've written a little bit about how to do this with vanilla javascript. It may not be the most optimal, but hopefully it helps if you don't wish to use jQuery. (I still recommend the jQuery methods if you already use it in your project)
So we start by finding the .active-piece element.
var active = document.querySelector(".active-piece");
Next, we'll back up until we're in the .item element. We know it is two elements above.
var item = active.parentElement.parentElement;
Now we'll loop through the parent of item until we find a match.
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
Here's a snippet
var active = document.querySelector(".active-piece");
var item = active.parentElement.parentElement;
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
you can make use of filter to get all the items having active-piece as child element,
you can store result in itemWithActivePiece variable and use it for further operations
$(function(){
var itemWithActivePiece = $('.container .item').filter(function(){
return $(this).find('.piece-container .active-piece').length > 0;
});
console.log(itemWithActivePiece.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
This is my html code:
<div class="w-grid-list">
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title1
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">228</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title2
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">229</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
</div>
<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-18">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product1
</h2>
<div class="w-post-elm">
<span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-19">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product2
</h2>
<div class="w-post-elm">
<span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
And I want to hide(style display:none) Div Element just with "owl-item" class which it has "article" tag with "product_cat-19" class.
my JavaScript code:
<script>
// get the heading from the first article
const product_cat_19 = document.querySelector('.product_cat-19');
// get its parent, the current article
const currentArticle = product_cat_19.parentNode.style.display='none';
</script>
this code can not hide "owl-item" class. but hide div with "w-grid-list" class.
is there any way to do this with css only or js need?
I searched on Google and found only solutions to solve this problem with JavaScript that didn't work properly.
any one can help me to edit my code?
You can grab the element, both, with JavaScript & CSS like so:
JavaScript:
const el = document.querySelectorAll('.owl-item .product_cat-19');
el[0].style.display = 'none';
CSS:
.owl-item > .product_cat-19 {
display: none;
}
querySelector() will match only for the first occurance it finds. You need querySelectorAll() to go through all elements and then check if the parents has (or not) the class you look for :
example : https://codepen.io/gc-nomade/pen/YzXQeyN
for (let e of document.querySelectorAll('.product_cat-19')) {
var dady = e.parentNode;
if (dady.classList.contains("owl-item")) {
dady.style.display = "none";
}
}
<div class="w-grid-list">
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title1
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">228</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title2
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">229</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
</div>
<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-18">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product1
</h2>
<div class="w-post-elm">
<span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- will be hidden -->
<div class="owl-item active" style="width: 204px;">
<!-- because of this child -->
<article class="product_cat-19">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product2
</h2>
<div class="w-post-elm">
<span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
product2 's parent is hidden, if this is what you looked for. there can be many, it will hide every .owl-item holding a direct child with the class .product_cat-19.
if you want to hide any parent container if it has not the .w-grid-list ,
same way check the class then if(okay){leave it} else { hide it}
for (let e of document.querySelectorAll('.product_cat-19')) {
var dady = e.parentNode;
if (dady.classList.contains("w-grid-list")) {}
else {
dady.style.display="none";
}
}
<div class="w-grid-list">
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title1
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">228</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title2
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">229</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
</div>
<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-18">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product1
</h2>
<div class="w-post-elm">
<span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- will be hidden -->
<div class="owl-item active" style="width: 204px;">
<!-- because of this child -->
<article class="product_cat-19">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product2
</h2>
<div class="w-post-elm">
<span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
I have a list that looks like this:
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href=""></a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href=""></a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href=""></a>
</div>
</div>
</div>
What I am trying to do now is to add a hover effect to the card-stacked once the user hovers over card-link but the only problem is that I dont know how to target the specific div. I dont want to add a hover effect to all divs just the parent of the a tag
Eg:
$('.card-link').hover(function() {
$(this).$('.card-stackedl').addClass('hover');
}, function() {
$(this).$('.card-stacked').removeClass('hover');
});
You could use jQuery methods closest() or parent() :
$(this).closest('.card-stacked').addClass('hover');
//OR
$(this).parents('.card-stacked').addClass('hover');
Hope this helps.
$('.card-link').hover(function() {
$(this).closest('.card-stacked').addClass('hover');
}, function() {
$(this).closest('.card-stacked').removeClass('hover');
});
.hover{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
I think this documentation should give you a hand here https://api.jquery.com/category/selectors/
$('.card-link').hover(function() {
$(this).parents('.card-stacked').addClass('hover');
}, function() {
$(this).$('.card-stacked').removeClass('hover');
});
Try this.
You have to use .closest() method to get the specific parent in the tree. You can also make use of .toggleClass() like:
$('.card-link').hover(function(e) {
$(this).closest('.card-stacked').toggleClass('hover', e.type === 'mouseenter');
});
.hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
I have some content boxes in my page and I need to toggle some contents under these content boxes.
My content boxes look like this:
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
What I need is when user click on .readmore I want to toggle .more-info DIV. This is how I tried it. but its only toggling contents in first content box.
$(".readmore").click(function() {
$(".more_info").animate({ opacity: 1.0 },200).slideToggle(500, function() {
$(".readmore").html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Can anybody tell how to modify this code?
Fiddle
Check this out:
$(".readmore").click(function () {
var $this = $(this);
$this.parent().siblings(".more-info").slideToggle().promise().done(function () {
$this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Or simply
$(".readmore").click(function () {
var $this = $(this);
$this.parent().siblings(".more-info").slideToggle(function () {
$this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Fiddle
$(".readmore").click(function() {
var txt = $(this).parent().next(".more-info").is(':visible') ? "Read More" : "hide";
console.log(txt);
$(this).text(txt).parent().siblings(".more-info").slideToggle()
});
.more-info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>