We Keep Coding

jQuery accordion - style="display:none; - stops javascript

I'm using an accordion style html code
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
with this jQuery script
$(function(){
$('.blog .accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.blog .accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
In the first accordion tab I'm using a fotorama slideshow.
The problem I'm facing is, that the 'style="display:none;' breaks/stops the execution of the slideshow. How can use the slideshow after toggling the accordion?
Regards
Peter

Try removing the inline style from there, and add a parent <div> which wraps all that, and then control the slideToggle from there, not on the accordion itself.
<div class="acc">
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
</div>
Also I'm not sure what your if is for but you can just use toggleClass()

Hail mary guess
Try:
<div class="accordion-panel"style="visibility:hidden;">content</div>
I think the plugin is trying to manipulate that css.
Do you have a demo I could look at? I might be able to give a better answer.

$(function(){
$('.accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
<div class="accordion-link">Link2</div>
<div class="accordion-panel" style="display:none;">content2</div>
<div class="accordion-link">Link3</div>
<div class="accordion-panel" style="display:none;">content3</div>
I didn't see any wrong with your code

I removed the inline style "display:none" and added this line of code in jQuery script
$('.accordion-panel').css('display','none');
This helps fotorama initialize and start - but with the wrong image size.
Adding this line of code to the click(function)
$(window).trigger('resize');
resolves the problem. Now it works.

Pop up with on click button

I already made a photo gallery using a plugin which I want to show this gallery when user on_click my homepage button.
I am not sure how to achieve this please help me out here.
This is my button code:
<div class="ow-button-base ow-button-align-center">
<a class="ow-button-hover" target="_blank" id="introduction" onclick="intro_on">
<span>Click me to see gallery</span>
</a>
</div>
This is my photo gallery code:
<div class="huge_it_slideshow_image_wrap_1" style="max-height: 1800px; overflow: visible;">
<div id="huge_it_loading_image_1" class="display" style="display: none;"></div>

$('#introduction span').click(function(){$('#huge_it_loading_image_1').show();});

You could use the jQuery show() function:
$(".huge_it_slideshow_image_wrap_1").show();
but you need to set the display to none in your css file.

You do not need jquery for this simple task.
Input a script tag in the bottom of your document with some javascript code in it.
<script>
function intro_on() {
document.getElementById("huge_it_loading_image_1").style.display = 'block';
};
</script>
You also need to update the onclick in your html to "intro_on()" so it can be executed as a javascript function.

How to slide down dynamic content using jQuery?

I have a comment system and I would like to implement the "Show Replies (2)" slide down effect.
This is an example of my setup.
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment">
Funny comment up there, mate.
</div>
</div>
But because both the main comment and its sub comments are dynamically generated using ajax, setting event handlers was a little tricky. This is how I did it:
$(".comment").delegate('.show-replies', 'click', function(event) {
$(this).parent().next(".sub-comment").slideDown();
});
I've tried to make the setup as simple and close to the real thing as possible.
What am I doing wrong and how do I solve it?

<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click', function() {
$('.sub-comment').slideToggle();
});
});
</script>

In order to bind to NEW dynamic content you need to tell jquery where it is going to be.. Also make sure to use the latest jQuery, delegate is old.
<div class="comments">
<div class="main-comment">
Message.Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click','.comments', function() {
$('.sub-comment').slideToggle();
});
});
</script>
Notice the .on(eventType, selector, function) signature.
This will work for dynamic content, anything loaded INTO the div class 'comments' - jQuery will always travesre that container from fresh, instead of caching it.
Also- dont just do it on the entire page,because it will cause slow response, since, every click, it will try and bind to the selector.

Replacing
$(this).parent().next(".sub-comment").slideDown();
with
$(this).parent().parent().next(".sub-comment").slideDown();
Fixed the problem.

AddThis in AJAX

I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>

Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');

var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.

method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.

You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>

jquery double function each

I have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks

You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted

I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)