Develop Reference

FadeToggle change text and show

I'm trying to get a fade toggle to work. When you click on (+) two it is supposed to show two links and change to (-) two and when you press again it closes those links and goes back to (+) two. Right now, I can't get anything to happen when you press on the toggle.
<div id="ending">
An everyday snapshot of
<div class="toggle"><span style="font-size:11px">(+) </span>two </div> sfsfs
</div>
<div class="content">
sfs & sfsf
</div>
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).next('.content').slideToggle(450);
e.stopPropagation();
});
});
https://jsfiddle.net/Dar_T/b5tbfn5g/

1) You actually have to reference/include the jQuery library for jQuery functions to work.
2) You had an improper selector.
Rather than $(this).next('.content').slideToggle(450);
just use $('.content').slideToggle(450); or $(this).parent().next('.content').slideToggle(450);
The content div is not a sibling of the toggle div.. so next() isn't going to find it. But if you back up to the parent of the toggle div, then the content div is a sibling, so next() will find it.....
Depending on the rest of the markup, the selector may need to be further altered, but that's the main issue with the function overall.
Seems to work with the selector fixed and the jQuery library actually included.
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).parent().next('.content').slideToggle(450);
e.stopPropagation();
});
});
Updated Fiddle

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);
});
});

Hiding the closest element

I have some jquery to hide content on an index page.
the commented out code in the fiddle is what i have at the moment - but it hides all content divs if any toggle link is clicked.
HTML
<div>
<h1>Dogs</h1>
<a class="toggle_group_name">∆</a>
</div>
<div class="group_name">
Dogs do this, that and something
</div>
<div>
<h1>Cats</h1>
<a class="toggle_group_name">∆</a>
</div>
<div class="group_name">
Cats do this, that and something different
</div>
jQuery
$(function() {
$('.toggle_group_name').click(function() {
$(this).parents("div").find('.group_name').toggle();
});
});
I want only the class immediately following the toggle link to be hidden/shown, but can't get it working. Have tried using parents, nextAll, and various other methods from similar examples I've found on SO, but so far nothing has worked.

The target element is not sibling or parent of the clicked element, it's next sibling of the clicked element's parent, so .parents() and .nextAll() methods are not useful in this case, you can use .closest()/parent() and .next() methods:
$(this).closest('div') // closest parent div of the clicked element
.next('.group_name') // it's next .group_name sibling
.toggle();
http://jsfiddle.net/xUgG5/

This seems to work in your fiddle:
$(function() {
$('.toggle_group_name').click(function() {
$(this).parents("div").next('.group_name').toggle();
});
});

Just use first().
http://jsfiddle.net/P6GEC/9/
$(function () {
$('.toggle_group_name').click(function () {
$('.group_name').first().toggle();
});
});
http://api.jquery.com/first/

jquery this animate this element without id

In my HTML code I have a div. This div includes some warnings to the users. Warnings are wrapped inside div elements with no ID. If user clicks on close button, it should remove the warning div.
<div id="alarmbox" align="center">
<div>this is warning 1<button onclick="remove_div_of_this_button(this);">x</button></div>
<div>this is warning 2<button onclick="remove_div_of_this_button(this);">x</button></div>
</div>
and this is my JS code:
function remove_div_of_this_button(thisbutton)
{
thisbutton.parentNode.parentNode.removeChild(thisbutton.parentNode);
}
It works fine. However, removing an element is better to be animated instead of sudden remove. If I want to manipulate JS only, how to remove the div with jquery? Is it possible to identify thisbutton in jquery since $(thisbutton) should not work here?

Separate out js from your html and use click event with jquery.
With fadeOut
$(function(){
$('#alarmbox button').click(function () {
$(this).closest('div').fadeOut(1000,function(){
$(this).remove();
});
});
});
Demo
Or try slideUp
Demo2

Like this maybe?
function remove_div_of_this_button(thisbutton)
{
$(thisbutton).parent().fadeOut(function() {
$(this).remove();
});
}

Problem using toggleclass to change the span of the div

I am using blueprint CSS framework. I have an article spanning 24 cols but I trying to use jQuery toggleclass (onclick) to reduce it to 20 cols and show the buttons for actions in the remaining 4 cols.
$("div").each(function() {
$(this).click(function() {
$(this).toggleClass("span-24");
$(this).toggleClass("span-20");
});
});
I have more than one div so I use each, but it does not work.
I appreciate any help.

This code should do what you're after:
$("div").toggle(function() {
$(this).attr("class", "span-24");
}, function() {
$(this).attr("class", "span-20");
});

You can bind the click event to all divs without the each loop. Also, you can use the :gt() greater-than selector and then toggle() the visibility of those spans
$("div").click(function() {
$(this).find("span:gt(19)").toggle();
});

you don't want to toggle classes on all divs you have, rather just the one with content
you can even simplify this code more:
$('#toggler').click(function(){
$('#content').toggleClass('span-20 span-24');
});
the #toggler.click() is just one of events that can run the toggleClass(), in your HTML it could be onload or whatever:
$('#content').toggleClass('span-20 span-24'); //main code (and all of it, too)
example: http://jsfiddle.net/hhMFs/1/

You can also do this:
$("div").click(function() { $(this).toggleClass("span-20 span-24"); });