I need help toggling multiple divs with the codes below. It works well with one div but I will multiple divs would be looped with php so it will be impossible to target each loop to give unique IDs or classes.
Below are the codes, please help out with the correct JQuery
function clickHandler() {
$('#hide').toggle();
$('#show').toggle();
$('.more-content').toggle('slow');
}
$(document).ready(function(){
$('#hide, .more-content').hide();
$('#hide, #show').on('click', clickHandler);
});
HTML
<div class="more-content">
<!--These are the contents-->
</div>
<button id="hide" class="more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>
<button id="show" class="more_arrow">Expand <span class="fa fa-chevron-down"></span></button>
When working with repeating components you don't want to use ID's you want to use common classes for common elements. Then you use an outer container for each repeating "module".
Then you can isolate components within each "module" by only searching within that module instance
HTML - can repeat as many <article> as you want, the script will work for all instances independently
<article>
<div class="content"></div>
<div class="more-content"></div>
<button class="hide" class="more_arrow">Collapse</button>
<button class="show" class="more_arrow">Expand</button>
</article>
JS
$('.hide, .more-content').hide();// should be done with css not js
$('.hide, .show').on('click', clickHandler);
function clickHandler() {
$(this).toggle()
.siblings('.hide, .show')
.toggle()
// only toggle more-content within this instance of <article>
.parent().find('.more-content')
.toggle('slow');
}
You can target the currently clicked div using $(this) within the handler, so
function clickHandler() {
$(this).toggle();
}
Will toggle the currently clicked div.
You can toggle a nearby div to the one clicked using this
$(this).nearest('.someclass').toggle();
Use classes where you have repeating elements you want to access.
Hmmm... looks like i took too much time trying to write a response. Anyway here's another just not to let it go to waste.
js:
function clickHandler() {
console.log($(this).data('link'))
var link = $(this).data('link');
$('.hide[data-link=' + link + ']').toggle();
$('.show[data-link=' + link + ']').toggle();
$('.more-content[data-link=' + link + ']').toggle('slow');
}
$(document).ready(function(){
$('.hide, .more-content').hide();
$('.hide, .show').on('click', clickHandler);
});
HTML:
<div class="more-content" data-link="0">
<!--These are the contents-->
</div>
<button class="hide" class="more_arrow" data-link="0">Collapse <span class="fa fa-chevron-up"></span></button>
<button class="show" class="more_arrow" data-link="0">Expand <span class="fa fa-chevron-down"></span></button>
<div class="more-content" data-link="1">
<!--These are the contents-->
</div>
<button class="hide" class="more_arrow" data-link="1">Collapse <span class="fa fa-chevron-up"></span></button>
<button class="show" class="more_arrow" data-link="1">Expand <span class="fa fa-chevron-down"></span></button>
<div class="more-content" data-link="2">
<!--These are the contents-->
</div>
<button class="hide" class="more_arrow" data-link="2">Collapse <span class="fa fa-chevron-up"></span></button>
<button class="show" class="more_arrow" data-link="2">Expand <span class="fa fa-chevron-down"></span></button>
Essentially, you'll need a variable to specify which button should link to which div. Then you need to put that variable in an attribute of some sort. I chose a data attribute named 'link' but you could also use a class name.
You must give to your divs the same class, in example 'my-class' and hide or show them depend on button clicked.
$(document).ready(function(){
$('#hide').on('click', function(){
// Hide all elements which have my-class class
$('.my-class').hide();
});
$('#show').on('click', function(){
// Show all elements which have my-class class
$('.my-class').show();
});
});
You can too get elements by attribute value. In example by id value
$('[id=test]')
If you give to your elements ids prefix, you should be able to get all of them by this expression
$('[id^=test]')
By changing ^ mark to $ you can search elements with specified postfix
Try this:
jsFiddle Demo
First, surround each content DIV + buttons in a container DIV.
Then, use jQuery traversal methods siblings() and prevAll() to toggle the appropriate DIVs.
HTML:
<div class="container">
<div class="more-content">
Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore — While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. "'Tis some visiter," I muttered, "tapping at my chamber door — Only this and nothing more."
</div>
<button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>
<button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button>
</div>
<div class="container">
<div class="more-content">
The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped.
</div>
<button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>
<button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button>
</div>
<div class="container">
<div class="more-content">
Whatsoever things are true, whatsoever things are honest, whatsoever things are just, whatsoever things are pure, whatsoever things are lovely, whatsoever things are of good report; if there be any virtue, and if there be any praise, think on these things.
</div>
<button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>
<button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button>
</div>
jQuery:
$(document).ready(function(){
$('#hide, .more-content').hide();
$('#hide, #show').on('click', function(){
$(this).prevAll('.more-content').toggle('slow');
$(this).siblings('button').toggle();
$(this).toggle();
});
});
Related
I have this HTML:
<p></p>
<div class="comment_like">
<span class="reaction_2 tooltipstered" id="like13seperator2" rel="unlike"><i
class="likeIconDefault"></i>Like</span>
</div>
Now I want to add this div: <div class="commentLikeCount"></div> before this comment_like class using jQuery.
I am trying with this code:
$("#like"+posts_id).parents(".comment_like").prepend('<div class="commentLikeCount"></div>');
but somehow not working :(
Updated for the new Questions:
Now I have that HTML:
<p></p>
<div class="commentLikeCount">
<br>
<span class="float-right"> 1</span>
<img src="assets/images/db_haha.png" alt="" class="float-right old">
<img src="assets/images/db_love.png" alt="" class="float-right">
</div>
<div class="comment_like">
<span class="unLike_2" id="like13seperator2" rel="unlike">
<i class="loveIconSmall likeTypeSmall"></i>Love
</span>
</div>
Now, I just want to remove the last Img from the coomentLikeCount class.
You can use insertBefore:
$('<div class="commentLikeCount" />')
.insertBefore($("#like"+posts_id).parents(".comment_like"))
Or before:
$("#like"+posts_id).parents(".comment_like")
.before('<div class="commentLikeCount" />')
If you're inserting commentLikeCount in every .comment_like, then just use $('.comment_like') instead of $("#like"+posts_id).parents(".comment_like")
Regarding your comment:
well if I already have this div then how can select this div?
You can prepend using insertBefore like:
$('.commentLikeComment').insertBefore($("#like"+posts_id).parents(".comment_like"));
To your updated question, you can remove last image like:
$('.commentLikeCount img').last().remove()
You can do with before().
$(".comment_like").before("<div class='commentLikeCount'></div>");
I am adding items dynamically with ajax_select (app with builtin js script to add items), it is adding items as
<div class="col-md-4 col-sm-6">
<div class="form-group ">
<label class="control-label" for="id_colours">Colours</label>
<input type="text" name="colours_text" id="id_colours_text" value="" autocomplete="off" class="form-control ui-autocomplete-input">
<input type="hidden" name="colours" id="id_colours" value="|1|7|2|" data-ajax-select="autocompleteselectmultiple" data-plugin-options="{"html": true, "source":
"/ajax_select/ajax_lookup/colours"}" data-changed="true">
<div id="id_colours_on_deck" class="results_on_deck">
<div id="id_colours_on_deck_1">
<span class="ui-icon ui-icon-trash" id="kill_1id_colours">X</span> White
</div>
<div id="id_colours_on_deck_7">
<span class="ui-icon ui-icon-trash" id="kill_7id_colours">X</span> Yellow
</div>
<div id="id_colours_on_deck_2">
<span class="ui-icon ui-icon-trash" id="kill_2id_colours">X</span> Black
</div>
</div>
</div>
Here I added White, Yellow and Black these are inside div of id = id_colours_on_deck, how can I get the list of all colours in id_colours_on_deck.
I am not friendly with jquery probably here I can get the answer.
You can iterate over the divs using each() and grab only the text using .contents()[1], like this:
("div[id^='id_colours_on_deck_']").each(function(){
$($(this).contents()[1]).text();
})
If I have understood your question correctly, you want to "extract" the colors you have mentioned inside the divs? (So White, Yellow, Black)
Using jQuery, you should be able to do something like this with jQuery: (however, this will also include the "X" that is inside the span, so that will need to be looked at)
$("#id_colours_on_deck").find("div[id^=id_colours_on_deck]").each(function() {
var value = $(this).text();
});
Because it's dynamically added you need to use $(document) or $('body') to find your elements as jQuery works with the DOM that's loaded on document load. Which is why newly added elements can't be targeted using conventional ways:
$(document).find('#my-dynamic-element'); //this is how you get the dynamically added element
then to get your data you'd use something like:
$(document).find('#id_colours_on_deck_7').text();
You can use an each function, something like this.
$('#id_colours_on_deck div').each(function) {
$('#id_colours_on_deck div').html();
}
This however will include the X from the span tag.
Fiddle
https://jsfiddle.net/shawnw/4yaem85k/12/
Another solution would be to use this technique
$("div[id^=id_colours_on_deck_]").clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
You can use plain javascript, querySelectorAll and lastChild.
With querySelectorAll you get the selection of div with a color text, and with lastChild you avoid getting the span and can grab the text node holding the color.
Stack snippet
Array.from(document.querySelectorAll('#id_colours_on_deck div')).forEach(el => {
console.log( el.lastChild.textContent );
})
<div id="id_colours_on_deck" class="results_on_deck">
<div id="id_colours_on_deck_1">
<span class="ui-icon ui-icon-trash" id="kill_1id_colours">X</span> White
</div>
<div id="id_colours_on_deck_7">
<span class="ui-icon ui-icon-trash" id="kill_7id_colours">X</span> Yellow
</div>
<div id="id_colours_on_deck_2">
<span class="ui-icon ui-icon-trash" id="kill_2id_colours">X</span> Black
</div>
</div>
Updated based on a comment how to be compatible with older browsers.
Here is an option that will do that, far way back in time :)
var list = document.getElementById('id_colours_on_deck').children;
for (var i = 0; i < list.length; i++) {
var el = list[i].lastChild;
console.log( (el.textContent || el.innerText) );
}
<div id="id_colours_on_deck" class="results_on_deck">
<div id="id_colours_on_deck_1">
<span class="ui-icon ui-icon-trash" id="kill_1id_colours">X</span> White
</div>
<div id="id_colours_on_deck_7">
<span class="ui-icon ui-icon-trash" id="kill_7id_colours">X</span> Yellow
</div>
<div id="id_colours_on_deck_2">
<span class="ui-icon ui-icon-trash" id="kill_2id_colours">X</span> Black
</div>
</div>
I have made a very small change to your HTML by adding the color name to a span with class .color-name, and have generated the following answer:
var colorParentList = $("#id_colours_on_deck span.color-name");
colorParentList.each(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="id_colours_on_deck" class="results_on_deck">
<div id="id_colours_on_deck_1">
<span class="ui-icon ui-icon-trash" id="kill_1id_colours">X</span> <span class="color-name">White</span>
</div>
<div id="id_colours_on_deck_7">
<span class="ui-icon ui-icon-trash" id="kill_7id_colours">X</span> <span class="color-name">Yellow</span>
</div>
<div id="id_colours_on_deck_2">
<span class="ui-icon ui-icon-trash" id="kill_2id_colours">X</span><span class="color-name"> Black</span>
</div>
</div>
I hope this was helpful.
I am trying to make a filter with JQuery that hides all div's and then only shows div's depending on a class inside it called "brand", I managing to get it to hide all div's however it will not show the ones matching the class.
The alert I have added inside the statement is showing so I think it may be something to do with the parent show, has anyone got any ideas?
The html:
<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right" title="" data-original-title="">
<div class="section-features" style="display: none;">
<p><i class="icon-star"></i> protective, waterproof lid</p>
<p><i class="icon-star"></i> enhanced wooden coating</p>
<p><i class="icon-star"></i> long lasting materials</p>
<p><i class="icon-star"></i> 2 year warranty</p>
<p><i class="icon-star"></i> includes durable bag</p>
</div>
<div class="brand tp" style="display: none;"></div>
<div class="price" style="display: none;"> £47.99</div>
<a href="Garden-Games-Picnic-Table-Sandpit-6407.html">
<img src="picnic_table_sandpit.jpg" title="Garden Games Picnic Table Sandpit" alt="Garden Games Picnic Table Sandpit" width="220">
<h3 align="center">Garden Games Picnic Table Sandpit</h3>
<p align="center">
<span> was: £69.99</span>
<span> Now: £47.99</span>
<span class="button">More Info</span>
</p>
</a>
<a name="a6407"></a>
</div>
/\ there are about 20 div's like this with different brand classes example class="brand garden"
The Js:
function brand(string){
var brand = string;
$('.section-link').hide();
if ($('.section-link').children('.brand').hasClass(brand)) {
alert(brand);
$(this).parent().show();
}
}
I am also testing via the chrome url bar javascript: brand("tp");
Any help greatly appreciated,
Simon
You need to use multiple selector here because you need to fetch .brand elements which also have the specified class
function brand(string){
var brand = string;
$('.section-link').hide();
$('.section-link').children('.brand.' + brand).parent().show();
}
Demo: Fiddle
This is the first time I've ever using stackoverflow, so here I go.
I'm creating a website and currently, I have created buttons for the navigation. By default (the homepage) shows a slideshow using JavaScript and this is all contained within a div.
When I click, let's say the 'About Me' page, I want that div to fade out and another div to fade in which will contain an image and text.
Here's my code:
<body>
<div id="top_wrapper">
<a class="button navigation" id="homeBtn">Home</a>
<a class="button navigation" id="aboutBtn">About Me</a>
<a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
<a class="button navigation" id="successBtn">Success Stories</a>
<a class="button navigation" id="workBtn">Community Work</a>
<a class="button navigation" id="charityBtn">Charity</a>
<a class="button navigation" id="contactBtn">Contact Me</a>
</div>
<div id="home">
<div id="sliderFrame">
<div id="slider">
<img src="_images/_image01.jpg" />
<img src="_images/_image02.jpg" />
<img src="_images/_image03.jpg" />
<img src="_images/_image04.jpg" />
<img src="_images/_image05.jpg" />
</div>
</div>
<div id="border">
<img src="_images/_border.png" />
</div>
</div>
<div id="aboutme">
<div id="text">
<p>This is the text</p>
</div>
</div>
</body>
In my example, I want that when the user clicks on the 'About Me' button, the div 'home' fades out and the div 'aboutme' fades in.
I've tried nearly all of the examples on stackoverflow as well as whatever the jQuery/JavaScript websites and Google could throw at me and no luck.
One way could be to do it like so:
$('#aboutBtn').click(function(){
$('#home').fadeOut(300);
$('#aboutme').delay(400).fadeIn(300);
});
Edit: the solution above was more of a quick fix for an individual case, the solution below is the kind of thing you should do instead, especially when you have multiple anchors/divs.
Here's a working jsFiddle example.
HTML:
<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>
<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>
CSS:
.targetDiv {
display:none;
color:red;
}
.targetDiv:nth-of-type(1) {
display:block;
}
jQuery:
$(function(){
$('.buttonNav').click(function(){
$('.targetDiv').fadeOut();
$('#div'+ $(this).prop('target')).delay(400).fadeIn();
});
});
This approach would be much cleaner for scaling usage of options, like in your case.
You can fadeout the home div and in callback of this fadeout you can fadein the about me div. Somthing like this:
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').fadeIn('slow');
});
});
Here is the FIDDLE
Here is an improved example: jsfiddle
This example will allow you using the same div as a container for all links...
Note that you should add a href for your link tags.
Have fun.
jquery:
$('#aboutme').hide();
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.
EDIT: Tune up - and save time
See this jsfiddle
Now you should set only an array key as the same id of the relevant link and type in his text!
have fun
If have a set of collapsible elements, in which I need to replace classes left and right depending on event isCollapse:
<div class="collapsible-set">
<div class="collapsible">
<h3>
<a class="left">
<span class="left"></span>
</a>
</h3>
</div>
<div class="collapsible">
<h3>
<a class="right">
<span class="right"></span>
</a>
</h3>
</div>
</div>
I need to toggle the classes. Is there an eaiser way to do this than what I came up with?
if (collapse) {
$('.left').addClass('topLeft').removeClass('left');
$('.right').addClass('topRight').removeClass('right');
} else if (!collapse) {
$('.topLeft').addClass('left').removeClass('topLeft');
$('.topRight').addClass('right').removeClass('topRight');
}
There must be an eaiser way to do this without writing so much code...
look at toogleClass http://api.jquery.com/toggleClass/
$('.collapsible:eq(0)').find('a').toggleClass('topLeft').toggleClass('left');
$('.collapsible:eq(1)').find('a').toggleClass('topRight').toggleClass('right');
This should do the trick
$(".collapsible").find(".topLeft, .left").toggleClass("topLeft", collapse).toggleClass("left", !collapse);
$(".collapsible").find(".topRight, .right").toggleClass("topRight", collapse).toggleClass("right", !collapse);