Develop Reference

Jquery wouldn't hide an element

Done this a few times before, but something is wrong this time. Trying to create a popup. As you can guess, initially, it's hidden. It does show up on click, but when i try to close it, nothing happens. Also, when i try to change styles to display:none in developer tools, it switches back to display:block. Currently it's in the head section of the page, but i've tried placing it in the very bottom as well.
html of it
<div class="tablecell midlineunit popup-hml middle">
<div class="hml-popup-bg popupbg ">
<div class="hml-popup-cnt">
<div class="closepopup">X</div>
</div>
</div>
</div>
and js of it
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(){
$(this).parent().parent().hide();
});
});
and of course .hml-popup-bg is hidden in css

you can use this .. no need for .each() just use .click() and you can use .closest() instead of parent().parent();
$(".popup-hml").click(function(){
$(this).find(".hml-popup-bg").show();
});
$(".closepopup").click(function(e){
e.stopPropagation();
$(this).closest('.hml-popup-bg').hide();
});

This should work. Its because you close it, but dont stop propagation, so it gets opened again, through bubbling.
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(e){
e.stopPropagation();
$(this).parent().parent().hide();
});
});
https://jsfiddle.net/qcqacbyd/

Your usage of jQuery's .each() seems misplaced. What you really want to set up, I think, are 2 event listeners - one to open the popup when you click a button, another to close it when clicking the "X".
You might accomplish this with the following jQuery:
$(document).on("click", ".popup-hml", function(){
$(".hml-popup-bg").show();
});
$(document).on("click", ".closepopup", function(){
$('.hml-popup-bg').hide();
});

collapsible header content with javascript

i am struggling writing the appropriate javascript to collapse and expand my content
View:
<div>
<h3 id="roleHeader" class="roleHeader collapsible">Title</h3>
<div>Content to display to users</div>
</div>
javascript:
$(document).ready(function() {
//collapsible management
$('.collapsible').collapsible({
});
});

You can implement one very easily
jQuery(function($){
$('.collapsible').click(function(){
$(this).next().stop(true, true).slideToggle();
}).next().hide()
})
Demo: Fiddle

You are probably looking for slideToggle. This function will toggle between sliding the content up and down.
try this
$(document).ready(function() {
$('.collapsible').click(function(){
$(this).slideToggle(500);
});
});
500 is the speed of the animation.
You can also target the object you'd like to hide and show. Either give it an Id, class, or target it specifically with jQuery. Here, when you click on anything that has a class of collapsible, the next div will hide and show.
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").slideToggle(500);
});
});
If you need the animation to stop when you click on it again to prevent a jumping effect, add .stop(true) before the effect
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").stop(true).slideToggle(500);
});
});

Button element click event to toggleClass doesn't work

I have a on/off button that is featured here
I have all the elements in place and im expecting the button class .on to initiate when pressed.
Only it wont work no matter what i try.
i added the exact code in jsFiddle, it works there, but not on my page.
jsFiddle
My page
I'm adding the HTML inside jquery:
'<section>'+
'<button id="button" href="#"></button>'+
'<span>'+
'</span>'+
'</section>'+
I'm guessing its a conflict between CSS elements but i cant pinpoint the problem.
Any thoughts?

Try this
<script type="text/javascript">
$(document).ready(function(){
$('#button').on('click', function(){
$(this).toggleClass('on');
});
})
</script>

In jsFiddle you are correctly binding the event within $(document).ready(), while in your own page you are not. So in jsFiddle, the event is correctly bound to the button element only after the DOM is ready, while in your own page the event fails to bind since the element does not exist yet at that stage.

I can see this in your page's HTML:
<script>
$(function(){
$('#player').metroPlayer();
});
</script>
<script type="text/javascript">
$('#button').on('click', function(){
$(this).toggleClass('on');
});
</script>
You need to place your on() function inside the $(function() { ... });

Try this
$(document).ready(function(){
$('#button').click(function(){
$(this).toggleClass('on');
});
});

Jquery slidedown one element in div

I have a div like this:
<div>
<font class='slideclick'>Click here to slidedown dynamic content</font>
<div class='slidedownonclick'> This is the content that slides down </div>
</div>
Jquery triggers the 'slidedownonclick' to slidedown when 'slideclick' is clicked. This works great but i have and indefinite amount on these div's reccuring in the same webpage, from a mysql database. Giving them unique id's is impossible. Is there any way that i could get only the 'slidedownonclick' in the same div as its respective 'slideclick' to slidedown when it is clicked.
Any help would be much appreciated,
thanks,

This will slide down the next .slidedownonclick div when .slideclick is clicked:
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').slideDown();
});

On a .slideclick handler you will find that sibling with:
$(this).find('+ .slidedownonclick');
or:
$(this).next('.slidedownonclick');

$('.slideclick').click(function() {
$(this).next('.slidedownonclick').animate({
height: '+=50'
}, 1000);
});

Check about jQuery.next(), it's what do you want.
Using it you can get the next sibbling which class/id is the selector.
EDITED:
until jQuery 1.6.4
jQuery(document).delegate('font.slideclick', 'click', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
jQuery 1.7 +
jQuery(document).on('click', 'font.slideclick', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});

how to call jquery function without having to trigger selector event?

How do I call a jquery function by just loading the page? For example, on one page,I have a paragraph and this jquery code here:
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
How do I make the paragraph slowly fade away using jquery right after the page loads WITHOUT having any user input like clicking the button?

Just a small warning..
$('p') will select all the paragraphs in the page..
use the selector more clearly..
to achieve the requirement, you can add this line as said above..
$("button").click();
or
$("button").trigger('click');
A much better way of wiring this is..
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
}).trigger('click');
});
this will improve the performance by reducing the no.of search cycles.. :)
cheers

Can't you just call hide like that:
$(document).ready(function(){
$("p").hide(1000);
});

$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
$("button").click();
});
Just add that line.

just like this:
$(document).ready(function(){
$("p").hide(1000);
});