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.

Signature_pad doesn't work when hidden div is shown

I'm trying to implement this signaturePad https://github.com/szimek/signature_pad, and when I tried in a single page it works fine, but the problem comes when I try to put inside a div, which is hidden at the begining, then the pad doesn't work. I think is a canvas problem with the resizing, but I don't know how to solve it.
This is my code:
<div class="col-sm-9 col-md-10 message-list">
This is the first div, which I hidde when click on a row
</div>
<div class="col-sm-9 col-md-10 view-message" style="display:none" >
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear sign_btn" data-action="clear">Clear</button>
<button type="button" class="button save sign_btn" data-action="save">Save</button>
</div>
</div>
and this is the js part:
$(document).ready(function() {
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('display','none');
$(".view-message").fadeIn('slow').css('display','block');
});
});
I loaded all the js and css required and it is working in the main view, but not when I go through a button and change the div to block. I tried to read the documentation, but is not very clear.

Use: height: 0; overflow: hidden;
instead of: display:none
It works for me.

Can you try setting visiblity hidden instead of display:none ?
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('visibility','hidden');
$(".view-message").fadeIn('slow').css('visibility','visible');
});
});

CSS manipulations didn't work for me. Instead of playing with CSS, I didn't render the signature pad until the user was ready to sign. I.e. wrap the signature pad component with the condition that listens to some event.

Draggable many elements with same class

I need to be able to drag all the .notes on the page, but when i use draggable() from the jQuery UI, it only works for the first .note. I have jQuery UI downloaded and is working. When I click the page it makes a new .note so I think that this is a cloning problem. Here is the code
HTML:
<body>
<div id="wrapper">
<div id="wrp">
<h1>Click to make a new note!!!</h1>
<hr>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item"></textarea>
<div class="saved"><span class="msg"></span>
</div>
</div>
</body>
JS:
$(".note").closest('.note').draggable();
(I will not include all my JS)
Fiddle here: http://jsfiddle.net/cjhind/zfxj3cps/46/
Any advise?

Add this extra line in your onclick function because jquery cannot recognise new items. It is like it has already did target the items with .note and you need to retarget them. Take care because this will load again the script and it will act twice. so as many items you insert you can see by firebug that it is calling script more times. If you need more info let me know.
$('#wrp, #wrapper').click(function showNote() {
$('.note').fadeIn();
$(".note").closest('.note').draggable(); // ADD THIS TO GIVE YOUR NOTE THE ABILTY TO BE DRAGABLE
});
Did this help?

How to show some elements after hiding everything? Toggling isn't working

Django template
<div class="jumbotron" id="{{post.id}}" class="parent{{post.parent_simpler}}"><h3>{{post.post}}</h3>
<input type = "text" style="display:none;">{% csrf_token %}</input>
<button type="button" class="btn-primary" id="{{post.id}}" style="display:none;">Add Post.</button>
</div>
Here's the javascript:
$(".jumbotron").click(function(){
$(".jumbotron").not(this).toggle("slow");
$("."+ "parent"+this.id).toggle("slow");
});
The first toggle hides all divs of jumbotron class but the second one which is supposed to make the divs with class .parent{{post.parent_post}} visible again is not working.
How do I fix this?

You can't declare class twice in an element but you can space separate as many class names as you want
<div class="jumbotron" id="{{post.id}}" class="parent{{post.parent_simpler}}">
Should be :
<div class="jumbotron parent{{post.parent_simpler}}" id="{{post.id}}">
You can confirm this by inspecting the live html in browser developer tools, only one declaration is being recognized

Hide div by default and show it on click with bootstrap

I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>

Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>

Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}

Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>

I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>