I have three article tags that each have 1 section which I need to animate to appear i.e height from 0px to whatever px. Each article has an ID what is the most efficient way to have an on click event for each one without writing a separate function for each individual id i.e is there a 'get clicked article's id' type method?
Thanks
This is what I would do,
jQuery:
$('.art h1').on('click', function() {
$(this).parent().find('p').stop(true).slideToggle();
});
html:
<div class="art">
<h1>Some article stuff</h1>
<p>text goes here</p>
</div>
fiddle: JSFIDDLE
If you want it to slide up and have only one open at a time then you can make a minor edit like so,
jQuery:
$('.art h1').on('click', function() {
$('.art p').slideUp();
$(this).parent().find('p').stop(true).slideToggle();
});
fiddle: Only one active JSFIDDLE
You can combine multiple selectors with a comma:
$('#id1,#id2,#id3').click(function() {
$(this).animate(...);
});
...or you could add class="something" to each element and just select that:
$('.something').click(function() { ... });
Use a class for the click event, instead of ids .. you can then use the id or some other attribute to identify which article to expand.
$('.someClass').click(function() {
thisId = $(this).attr('id');
$('#whereTheSectionsAre').find('.active').removeClass('active').next().slideUp(400);
$(thisId+'article').toggleClass('active').next().slideDown(400);
return false;
});
You can check some examples here, mainly if the id's are dynamic:
http://jsbin.com/uzEkiQa/3/
The first approach is the one already suggested, but with dynamic id's:
$('div[id^="id_"]').text("Changed by regexep");
The second one if your matching is a bit more hardcore uses filter:
var reg = new RegExp(/id_\d+/);
$('div[id^="id_"]')
.filter(function(index, item) {
return reg.test(item.id);
})
.text("Changed by filter and regexp");
After the selection you can apply the behaviours you want. Check the JSBin to play around.
Related
I know this is awfully simple, but I'm new to this and I just need to be shown it once. So when I'm using jQuery/javascript I find myself writing repetitive code again and again to target different elements with the same function, for example:
$(function() {
$('.icon1').click(function() {
$('.info1').toggle().addClass('animated fadeInDown');
$('.info2, .info3, .info4').hide();
});
});
$(function() {
$('.icon2').click(function() {
$('.info2').toggle().addClass('animated fadeInLeft');
$('.info1, .info3, .info4').hide();
});
});
and this repeats again for icon3 and icon4. I'm selecting a different element, showing another, hiding another three, and adding different classes in each function, and I don't know what would be the best way not to repeat the whole thing for each element. I would be very glad to be shown any ideas to refactor this, and wouldn't mind seeing how that is done in vanilla js also.
(For illustration the code here is a snippet from the code on the experience section of my portfolio where clicking on an icon reveals an info panel about it, and hides any previously shown info panels.)
Use a common class, use this, and not to remove it from the collection
$(function() {
$('.commonClass').click(function() {
$(this).toggle().addClass('animated fadeInDown');
$('.commonClass').not(this).hide();
});
});
You should be able to separate those selectors with commas.
$('.icon1,.icon2').click(function()
Or assign each a single class they share that behavior? ".icon-btn" where you use ".icon-btn" as the selector for any you wish to have that behavior.
It would be better if you can plan your html better with data attribute
for eg:
<div class="icon" data-info = "1"> <div>
<div class="icon" data-info = "2"> <div>
<div class="info-1 info"> <div>
<div class="info-2 info"> <div>
$('.icon').click(function() {
var className = '.info-' + $(this).data('info');
$('.info').hide();
$(className).toggle().addClass('animated fadeInDown');
});
you can also remove .info1,.info2 from js code by adding some common class in html as info to them.
for eg
I'm making some assumptions about your actual HTML, but you could probably leverage the siblings() method in this case.
$(document).on('click', '.icon', function() {
$(this).toggle().addClass('animated fadeIn')
.siblings().hide();
});
I have multiple div's with the same class name: ag-list-item
<!-- item one -->
<div class="ag-list-item">
</div>
<!-- item two -->
<div class="ag-list-item">
</div>
<!-- item three -->
<div class="ag-list-item">
</div>
They are dynamically created through an angular grid library I'm using, so I cannot set an ID attribute for any specific one.
I'm looking for a way to target only one specific div with the class name through a click event.
$('.ag-list-item').click() executes on all three elements; is there a way to only target one?
Update: 09/09/15
I found a solution that allows for specific index selection of a collection of div's with the same class, using the :eq() selector.
// select .ag-list-item at index 1
$('.ag-list-item:eq('1')').click();
As promised, I have done an update of my post.
$(document).ready(function () {
// If you want to select the first element :
$('.ag-list-item:first span span').click(function () {
// Your code
});
// If you want to select the second element, in this example
// Don't forget the quotes around the desired number
$('.ag-list-item:eq("1") span span').click(function () {
// Your code
});
// If you want the last element :
$('.ag-list-item:last span span').click(function () {
// Your code
});
)};
Please find the JSFIDDLE associated to this example (I have put some design style to a better understanding)
If you want a pure Javascript solution for speed, this could do the trick:
var els = document.getElementsByClassName('ag-visible-icons');
els[0].addEventListener('click', function() {
// Do something
});
For jQuery you could try:
$('.ag-visible-icons').first().click(function() {
// Do somehting
});
This is assuming the class you showed the the '.ag-list-item:first span span' path is the ag-visible-icon class
I have created an expanding div that hides on load and expands when clicked using javascript and jQuery. My problem is that I need to use this feature multiple times on each page (10-30x). Is there a way to call the function to work with multiple Div ids using an array or something of that nature (I am a newbie, my apologies), e.g. a few of my div ids would be eb1, eb2, eb3, eb4. and here is my script that currently works on one id:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#eb1').hide();
//hides box at the begining
jQuery("#hide").click(function() {
jQuery('#eb1').fadeOut(300);
//jQuery('#the_box').hide();
});
jQuery("#show").click(function() {
jQuery('#eb1').fadeIn(300);
//jQuery('#the_box').show();
});
});
</script>
Any help would be appreciated, even a link to an explanation.
Thanks,
Travis
Further to John Conde's answer this is also possible using attribute-starts-with:
jQuery('div[id^="eb"]').hide();
JS Fiddle demo.
It is, of course, easier to just use a particular class-name, and the selector then becomes:
jQuery('.className').hide();
JS Fiddle demo.
References:
Attribute-starts-with ([attribute^="value"]) selector.
You should be able to do this by separating the ids with a comma:
jQuery('#eb1','#eb2','#eb3').hide();
just type "jquery multiple div show hide" into google:
the first link gives this:
Show/Hide Multiple Divs with Jquery
:)
Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?
jQuery('div.hidable').hide();
//hides all 'hidable' boxes
jQuery("#hide").click(function() {
jQuery('div.hidable').fadeOut(300);
});
etc...
You could create a function to do that.
let me explain
function ToogleDiv(container){
// simple toogle
$(container).toggle();
// a toogle with some effect
$(container).toggle('slow', function() {
// add some action }); }
here's is a Jquery example Toogle Jquery Example
Hope this helps.
You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[id^="eb"]');
$(divs).hide();
$('#show').click(function(){
$(divs).show();
});
$('#hide').click(function(){
$(divs).hide();
});
Live example on JSFiddle
function show(var id){
jQuery(id).fadeIn(300);
}
function hide(var id){
jQuery(id).fadeOut(300);
}
and then, in your divs:
<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>
I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>
It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.
Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Check out the jQuery selectors and why not just use $(this)?
$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});
Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.
I have found this code (jQuery):
$('.toggle').click(function() {
$('.container').eq($(this).index()).toggle('fast');
});
This is my HTML:
<h4 class="toggle">Title1</h4>
<h4 class="toggle">Title2</h4>
<h4 class="toggle">Title3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>
CSS
.container {
display: none;
}
I can toggle what I want with it.
The problem
When I click the toggle-class I want to close all open container-classes BUT NOT the current container-class (because it should be toggled).
The current container-class should toggle. That means that all elements could be closed BUT ONLY ONE could be opened at the same time.
I tried to just put jQuery hide before the script but that makes the container-class impossible to close (because when toggle hide is equal to show).
Code guess hide all .container except this
Using David's answer as a starting point, we can use .siblings to accomplish what you want:
$('.toggle').click(function() {
var index = $(this).index();
$('.container').eq(index).toggle().siblings('.container').hide();
});
See: http://www.jsfiddle.net/85zCp/
As an aside, you might want to use JavaScript to hide all elements initially instead of CSS because users with JavaScript disabled won't be able to see any content if you use CSS to hide them. Also, you would probably want to have each h4 heading in front of the contents instead of it put together like you're doing right now.
$('.toggle').click(function () {
$('.container').hide('fast');
$('.container').eq($(this).index()).show('fast');
});
I don't know exactly but I think this is what you're looking for...
Cheers...
This is a little verbose, but its use should be fairly obvious:
$('.toggle').click(
function(){
var index = $(this).index();
$('.container').hide().eq(index).show();
});
JS Fiddle demo.