Jquery to expand and collapse div on clicking a image - javascript

My Html looks like
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>
My jquery looks like
$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function() {
if($(this).attr('class')=='expandstory') {
$(".description").slideUp(500);
$(this).parent().nextAll('.description:first').slideToggle(500);
$(this).attr('src','/images/minus.png');
$(this).addClass('collapsestory');
$(this).removeClass('expandstory');
}
else {
$(".description").slideUp(500);
$(this).attr('src','/images/plus.png');
$(this).addClass('expandstory');
$(this).removeClass('collapsestory');
}
});
I am making a simple thing more complex and more over this is not working when I expand/collapse the div multiple times.
I cannot change the HTML file. Please provide me good solution in jquery. Thanks in advance.

It's hard to understand what you mean when you say it's 'not working'. But you mention that it stops working when you expand/collapse <div>s multiple times, which leads me to believe you have animation queue issues, which can be solved using stop().
Try this:
$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function() {
if($(this).attr('class')=='expandstory') {
$(".description").stop(true,false).slideUp(500); //Here..
$(this).parent().nextAll('.description:first').stop(true,false).slideToggle(500); //Here..
$(this).attr('src','/images/minus.png');
$(this).addClass('collapsestory');
$(this).removeClass('expandstory');
}
else {
$(".description").stop(true,false).slideUp(500); //And here..
$(this).attr('src','/images/plus.png');
$(this).addClass('expandstory');
$(this).removeClass('collapsestory');
}
});

HTML
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description hide">Short description about the story</div>
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description hide">Short description about the story</div>
CSS:
.show
{
display:block;
}
.hide
{
display:none;
}
jQuery:
$('.expandstory').click(function(){
$(this).parent().next('.description').toggleClass('show hide');
});
Something like this.. http://jsfiddle.net/writetobhuwan/XqauU/

I believe he is looking for something like :
$('h3').next('.description').hide();
$('h3').first().next('.description').show();
$('h3').click(function(){
$(this).find('img').toggleClass('.expandstory');
$('.description').stop().slideUp(500);
$(this).next('.description').stop().slideDown(500);
});
fiddle

Something like this should work:
$('img.expandstory').click(function() {
var $this = $(this);
var $div = $this.parent().next();
$('img.expandstory').not($this).prop('src', '/images/plus.png');
$('div.description').not($div).slideUp(500);
$this.prop('src', ( $div.is(':visible') ? '/images/plus.png' : '/images/minus.png' ));
$div.slideToggle();
});
Here's a fiddle
Note: In the fiddle I've modified the alt property of the image just so that you can see that it changing.

Related

How to get DIV ID on click

I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.
With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo
Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.

jquery dynamically getting class on click of the each block and focus after ajax call

I am trying to get the class on click of each block as the content will
be changing on search of each product dynamically, and after ajax call
the same class which i have got when clicked should add focus to it.
code :
$('#somecontainer').on('click',function(e) {
var $target = $(e.target);
if ($target.hasClass("dynamic class")) {
// same class has to focus().
}
});
In Application View Example :
![enter image description here][1]
Code Screen-Shot :
![enter image description here][2]
Appreciate your help.
How about something like this?
HTML
<div id="somecontainer">
<div class="dynamic1">1</div>
<div class="dynamic2">2</div>
<div class="dynamic3">3</div>
<div class="dynamic4">4</div>
<div class="dynamic5">5</div>
<div class="dynamic6">6</div>
</div>
Javascript
$('#somecontainer').on('click', function (e) {
var $target = $(e.target);
var clazz = $target.attr('class');
$('.' + clazz).first().attr('tabindex', '-1').focus();
});
Fiddle available here.
HTML:
<div id="somecontainer">
<div class="dynamic1">1</div>
<span class="dynamic2">2</span>
<p class="dynamic3">3</p>
<div class="dynamic4">4</div>
<span class="dynamic5">5</span>
<p class="dynamic6">6</p>
</div>
Jquery:
$(document).ready(function(){
$("#somecontainer > *").click(function(){
alert($(this).attr('class'));
});
});
CSS
#somecontainer > *{
width: 100px; height:100px; background:#ccc;
margin:3px; clear:both;
}
You question is not accurate for your purpose. But rather than handling click event of container,you can simply handle click event of product block as follow (each product blocks have to be set base static class as product):
<div class='product dynamic1'></div>
<div class='product dynamic2'></div>
$('#somecontainer .product').on('click',function(e) {
//implementation
});
or each product is div element without inner child element, you can handle as follow:
$('#somecontainer div').on('click',function(e) {
//implementation
});
try sample at : http://jsfiddle.net/kyawlay/8z75c7f4/

on jquery liberary jquery-1.4.2.min.js i want to show hide on hover of image but its not working

am i doing any silly mistake in this ? i tried closest and next but its not supporting in this liberary. and i cant change liberay as well.
i want the function generaic so that i can use this icon multiple times
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
$(".iconblock").mouseover(function()
{
var sachin = $(this).find("hidden");
alert(sachin);
});
$(this).find(".hidden");
You forgot . before hidden.
You can use a short cut too specifying the context $(".hidden",this)
$(".iconblock").mouseover(function()
{
$(".hidden",this).removeClass('hidden');
});
http://jsfiddle.net/cJbVY/
If your intend is to show and hide on mouseover/mouse out you can try this
http://jsfiddle.net/ze6Xy/
$(".iconblock").hover(function()
{
$(".helpPopup",this).toggleClass('hidden');
});
Just trying to help here, Do you really need to use JS/Jquery, for this?
HTML:
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
And in CSS, something like:
.iconblock .hidden {
display:none;
}
.iconblock:hover .hidden {
display:block;
}

jquery fadeout/fadein flicker issue

i have read several posts on this but none seems to solve my issue,
when I fadeout a gallery, the other fades in, that works fine...but the item that fades in seems to 'refresh' or fade in again (real quick) after the fadein animation completed, here's my code:
what I have is basically a photo gallery (photographySection) contained inside a 'mediaContainer', this is the css:
.mediaContainer {
position: relative;
}
.photographySection {
top: 10px;
left:0;
position: absolute;
}
html:
<div class='mediaContainer'>
<div class='photographySection hidden' id='photographyExperimental'>
<ul><li><img src...></li></ul>
</div>
<div class='photographySection hidden' id='photographyFaces'>
<ul><li><img src...></li></ul>
</div>
</div>
js:
$(".photographyMenu").click(function(event){
$(".photographySection").hide(1,function() { // hide all sections
var section = $(event.target).attr("section"); // read new section to show
$("#"+section).fadeIn(500); // for example $("#photographyFaces")
});
});
everything works smoothly, but sometimes after the chosen div fades in, it flickers/blinks once for some reason
thanks!
Do you really need all that markup for such a simple task? If all you want is just fade a bunch of images in and out, you could do something like this:
html markup:
<div class="mediaContainer">
<img src="" />
<img src="" />
<img src="" />
</div>
jQuery:
function fadeInOut(){
var imgs = $('.mediaContainer > img');
imgs.wrapAll('<div class="slideshow" />');
$('.slideshow > img:gt(0)').hide();
setInterval(function(){
$('.slideshow > img:first')
.fadeOut(500)
.next('img')
.fadeIn(500)
.end()
.appendTo('.slideshow');
}, 5000);
}
Maybe someone more experienced can improve upon this code. You can also set vars to those "magic numbers" (500/5000) and some other things, but that should solve the problem with much less code (just an option).
Just don't use the 500, and it will work smoother, slow is 600miliseconds and normal is 400miliseconds
You can try this one: http://jsfiddle.net/S4sbm/
$(".photographySection:gt(0)").hide();
$(".photographyMenu").click(function(event){
$(".photographySection").fadeOut(500);
var section = $(event.target).attr("section"); // read new section to show
$("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")
});
checkout the fiddle and see if this helps.

Why isnt my Jquery background image switching?

Heres my Jquery
$(".sectiontitle").click(function (e) {
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
currBg = el.css('background-image');
if (currBg == "url(http://blah/resources/img/close.gif)") {
currBg = "url(http://blah/resources/img/open.gif)";
console.log('open gif');
}
else {
currBg = "url(http://blah/resources/img/close.gif);"
console.log('close gif');
}
console.log(currBg);
el.css('background-image', currBg);
return false;
});
Heres my HTML panel (of which there are many)
<div class="majorsection">
<div class="sectiontitle">
<h2>Restaurant Bookings</h2>
<div class="toggler">
<a title="click to hide" class="toggle" href="http://blah/index.php/console/index"><span>-</span></a>
</div>
<div class="clear"></div>
</div>
<div class="msectioninner">
<div class="minorsection">
<div class="sectionlist">
<div class="section"></div>
</div>
<div class="sectionoptions">
<div class="clear"></div>
</div>
</div>
</div>
</div>
The image switches on the first click and the panel slides all cool both ways but the image doesn't change back
Why not use two css classes instead.
It will make the code much cleaner and maintainable.
Failing that one thing to try is to change
.css('background-image', currBg)
to
.css('backgroundImage', currBg)
I remember there was an issue with this (but thought it had been fixed). If this does not work have you got a url showing the issue?
Have you tried console.log(currBg); right after you retrieve it? The url() property may be getting rewritten/resolved. Not sure - but a similar problem arises if you are testing the .attr('src') of an image - it might not be what you set it to anymore.
A suggestion though: Rather than hard coding the background-image values, consider doing something like:
$(document).ready(function(){
$('a.toggle').addClass('closed');
$(".sectiontitle").click(function(e){
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
// jQuery 1.3 has this:
// el.toggleClass('.closed');
// otherwise - use this:
if (el.is('.closed'))
{
el.removeClass('closed');
} else {
el.addClass('closed');
}
return false;
});
});
Then your a.toggle picks up the background-image property of the "open" and a.toggle.closed gets the "closed" image in your CSS files.

Categories

Resources