My website is a blog where I have a page with all the posts on a single HTML page. The "posts" are just images inside divs and I need some information to be able to show and hide in side the parent div of the images. Heres how its set up:
HTML
<div class="posts">
<h3>mm/dd/yy<p class="preview">click to show more</p><p class="expand">click to show less</p></h3>
<h4>Title</h4><br>
<p class="expand">caption caption caption caption caption caption caption caption caption</p>
<div class="centertext">
<img class="post" src="path/to/image">
</div>
<br>
</div>
lil CSS
.expand{display: none;}
JS
$(document).ready(function(){
$(".posts").click(function(){
$('.expand').toggle();
$('.preview').toggle();
});
What ends up happening that I don't want to happen is that all images and their captions are hiding and showing when I just click one. Shown here or fullscreen here Someone please help me! Additional info: I am using JQuery and Bootstrap too
Change your JS to:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
Or more simple:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand, .preview').toggle();
});
});
To toggle means, that you don't know the state. The best way is, to change a css-class or a data-attribute.
You can use event.target/this to refer the current object clicked and find child(expand/preview) of the object you clicked with find()
or
check for the children if it is .expand/.preview with function is() //not a better approach
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
or
$(document).ready(function () {
$(".posts").click(function (event) {
$(event.target).find('.expand').toggle();
//check if target is .expand or its child then first go to its parent with .parents().eq() then apply find()
$(event.target).find('.preview').toggle();
//check if target is .preview or its child then first go to its parent with .parents().eq() then apply find()
});
});
Related
What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.
Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)
Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo
I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo
Got a quick question here. I'm not sure if this is possible but.. I want to have a tooltip-ish function going on on my website. However, i want it to be kinda dynamic, so i don't have to have 100 unique divs.
If i have 4 divs, that looks the same, how would i go about just displayig the tooltip inside the div am hovering?
Example
<div id="theLink" class="123">
<img src="images/icons/icon_pc.png" alt="">
<div class="tooltip_websites">
<div class="arrow_up"></div>
<p>aiuwd hiau dhwuiaw diuah dwiauh dwaiuwd haiwudh</p>
</div> <!-- end tooltip_websites -->
</div> <!-- end bullet-circle -->
what if i have 4 divs like that, and when i hover #thelink i wanna display the "tooltip_website" for that current div? and not displaying the three others?
Right now I'm using:
$("#theLink").hover(
function () {
$(".tooltip_websites").stop(true).fadeIn();
},
function () {
$(".tooltip_websites").stop(true).fadeOut();
});
But if i want it to be more dynamic, what could i do?
use .find() to only target the elements that lie within selected dom:
$("#theLink").hover(
function () {
$(this).find(".tooltip_websites").stop(true).fadeIn();
},
function () {
$(this).find(".tooltip_websites").stop(true).fadeOut();
});
Use this
$(".tooltip_websites",this).stop(true).fadeIn();
what if i have 4 divs like that,
IDs must be unique use classes instead.
Change your HTML as
<div class="theLink" class="123">
JavaScript
$(".theLink").hover(
function () {
$(this).find(".tooltip_websites").stop(true).fadeIn();
},
function () {
$(this).find(".tooltip_websites").stop(true).fadeOut();
});
I am sort-of stuck with this minor part and I can't move on with my project.
Basically what I am trying to do is to fadeIn/fadeOut between two divs with same class, but keep the function as short as possible.
I have made following but apparently it will work only if both divs are hidden in the begginging and I need to show default title (first div) on load and after 2 seconds I want to swap to another title and then it will keep going circular.
HTML:
<div class="ref-title">Sample Title #1</div>
<div class="ref-title">Sample Title #2</div>
JS:
function titleSwap () {
$('.ref-title:hidden:first').fadeIn(500).delay(2000).fadeOut(500, function () {
$(this).appendTo($(this).parent());
titleSwap();
});
} titleSwap();
CSS:
.ref-title {
display: none;
}
JS Fiddle Demo
So I need first div displayed as block and then it will disappear and the other one will appear and keep going on like that... Any tips ?
JSFiddle - Adding a hidden class to the div you want to start as hidden and then changing the function as below should work.
HTML
<div class="ref-title">Sample Title #1</div>
<div class="ref-title hidden">Sample Title #2</div>
CSS
.hidden {
display: none;
}
JS
(function titleSwap() {
$('.ref-title').not('.hidden').delay(2000).fadeOut(500, function () {
var $me = $(this);
$('.ref-title.hidden').removeClass('.hidden').hide().fadeIn(500, function () {
$(this).removeClass('hidden');
$me.addClass('hidden');
titleSwap();
});
});
})();
Additionally, if you don't want to include the hidden class on the DIV within the mark-up you can just use $('.ref-title:nth-child(2)').addClass('hidden'); before the titleSwap function to add the class to the second DIV.
If you can use just show/hide you can try like this: show/hide Example
function toggleTitle() {
$('header > h2').delay(2000).toggle('fast', function () {
toggleTitle();
});
}
If you must use fadeIn/fadeOut its a bit more complicated due to the concurrent fade effect between the titles... this is my solution fadeIn/Out Example
function toggleTitle() {
var visible = $('header > h2:visible');
var hidden = $('header > h2:hidden');
visible.delay(2000).fadeToggle('fast', function () {
hidden.fadeToggle('fast');
toggleTitle();
});
}
it's easy if you put ID's on them, is this posible? check out this answer
jQuery fadeOut one div, fadeIn another on its place
$('#fadeout').fadeOut(300);
$('#fadein').delay(2000).fadeIn(300);
if you cannot add IDs, try this. it assumes they are the only elements under their immediate parent
$('.ref-title:first-child').fadeOut(300);
$('.ref-title:last-child').delay(2000).fadeIn(300);
html:
I have a ul list with each li counstructed like this:
<li class="A">list-item
<div>1</div>
<div class="B">2
<div class="C">3</div>
</div>
</li>
where div C has css property display:none;
I wrote this js:
$(".A").hover(function () {
$(".C").toggle();
});
that shows hidden divs on li hover, but I would like js working only on active li item.
So when i hover li item it shows only that list item hidden div.
any suggestions? I am new with js, so any help would be appreciated, thnx!
Try something like this, it will find class C within this (which will be the element being hovered)
$(".A").hover(function() {
$(this).find(".C").toggle();
});
Use context to narrow the lookup to the desired element's children.
$(".A").hover(function () {
$(".C", this).toggle();
});
Using the hover(), the correct format of hover function is:
$(".A").hover(
function () {
// A function to execute when the mouse pointer enters the element.
$(this).find(".C").show();
},
function () {
// A function to execute when the mouse pointer leaves the element.
$(this).find(".C").hide();
}
);
the html is
<a class="minimize" href="#targetElem" >Min</a>
<div id="targetElem">
<p class="handler"></p>
<div class="content">
content area
</div>
</div>
the javascript is the following code
$(document).ready(function(){
$('a.minimize').click(function() {
$($(this).attr('href')).siblings(".content").slideToggle("slow");
});
});
what i want is when click on the a href class minimize , the target of the href (#targetElem)no change, but select the #targetElem siblings(div class="content") animate, bcos i want to use them over and over,i don't want to add a lot of code to the .js file like the following code:
$(document).ready(function(){
$('a.minimize').click(function() {
$('#targetElem').siblings(".content").slideToggle("slow");
});
$('a.minimize1').click(function() {
$('#targetElem1').siblings(".content").slideToggle("slow");
});
$('a.minimize2').click(function() {
$('#targetElem2').siblings(".content").slideToggle("slow");
});
$('a.minimize3').click(function() {
$('#targetElem3').siblings(".content").slideToggle("slow");
});
});
so how can i do this???
Youre doing right, except that .content is not a sibling to the targetElem, but a child:
$(document).ready(function(){
$('a.minimize').click(function() {
$($(this).attr('href')).children(".content").slideToggle("slow");
});
});
sibling are all the element at the same level (brothers), and the children ar all the element inside the surrent element, but just one level depth (direct childs).
if you want go down all the hierarchy of an element you have to you the find method