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>
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>
I'm new to this section. I'm using a wordpress homepage and use wpbakery for creating my content.
My specific problem is that I have an accordion but cannot open it automatically.
That's what I did: created an accordion with different tabs. I wanna use a link like test.com\accordion#tab2 open the side and automatically the right tab2 of the accordion. Anyone know the code of JS I could use to solve this?
<div class="wpb_column vc_main_column vc_column_container vc_col-sm-12 typo-default">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="vc_tta-container" data-vc-action="collapse">
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#tabid1" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid3" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</li>
</ul>
</div>
<div class="vc_tta-panels-container">
<div class="vc_tta-panels">
<div class="vc_tta-panel vc_active" id="tabid1" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid1" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text1</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid2" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid2" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text2</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid3" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid3" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="height: 0px;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like to add html, css code to the wordpress homepage using javascript.
The problem that there is no id or different css class on the objects that I would like to change (I would like to add text and button lint to the images).
I have tried something like this but can't find solution for the specific problem
// Inspect element shows something like
// #p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image
// I have tried something like this but can't find solution for the specific problem
document.getElementById('#p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image').innerHTML = '<ol><li>html data</li></ol>';
<div class="p-tabs-content">
<!--Portfolio Tab / Active Tab-->
<div class="p-tab active-tab" id="p-tab-1">
<div class="project-carousel owl-theme owl-carousel">
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
You are looking for querySelector or querySelectorAll
Also the path can be simplified
Are you sure you want to fill an achor with an OL?
I added the start parameter
[...document.querySelectorAll('.gallery-item a.lightbox-image')]
.forEach(
(a,i) => a.innerHTML = '<ol start="'+(i+1)+'"><li>html data</li></ol>'
);
<div class="p-tabs-content">
<!--Portfolio Tab / Active Tab-->
<div class="p-tab active-tab" id="p-tab-1">
<div class="project-carousel owl-theme owl-carousel">
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you should use this
for first match element:
document.querySelector("Your selector here");
for get all matches elements:
document.querySelectorAll("Your selector here");
your code:
for(var i = 0 ; i < document.querySelectorAll("a.lightbox-image").length ; i++){
document.querySelectorAll("a.lightbox-image")[i].innerHtml = "<ol><li>html data</li></ol>";
}
I have creating a dynamic div using jQuery. That div will wrapping two elements 1. is <span> 2. is <a> the code be like below:-
$("div").delegate(".dateEdit", "click", function(e){
e.preventDefault();
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class= "specific">
<span id= "0">some data of 1</span>
<a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "1">some data of 2</span>
<a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "3">some data</span>
<a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
How will I take the text of the particular span by clicking its anchor tag and how will show the alert box only once time using this div without using $('.specific'). Thank you.
You can try $(this).prev('span').
Please note: The on() syntax is the new syntax as of jQuery 1.7 and it was meant to substitute bind(), delegate() and live().
$("body").on("click", ".dateEdit", function(e){
//e.preventDefault();
alert($(this).prev('span').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class= "specific">
<span id= "0">some data of 1</span>
<a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "1">some data of 2</span>
<a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "3">some data</span>
<a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
Get the closest div and find the span in that div and get the text of that span.
$("div .dateEdit").click(function(e){
var spanData = $(this).closest('.specific').find('span').text();
console.log(spanData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class= "specific">
<span id= "0">some data of 1</span>
<a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "1">some data of 2</span>
<a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "3">some data</span>
<a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
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>