Develop Reference

collapse / expand of panel-heading body

The given below code used to collapse/expand. I used this code, where there were multiple panel-headings to collapse/expand. And it worked fine, but I don't know how this is working. I have taken this code from internet.
It would be helpful if someone can explain , whats going on here or point me to somehere, where I can read about this.
second, can I use this same function without changing on a page, where ther is only one panel-heading div.Could you give an example, if yes.
function bindCollapseEvents(panels, numPanels) {
for (var i = 0 ; i < panels.length ; i++) {
var heading = $(panels[i]).children('.panel-heading');
var bodyCollapse = $(panels[i]).children('.panel-body');
if (heading.length != 0 && bodyCollapse.length != 0) {
numPanels++;
// $(heading[0]).attr('data-toggle', 'collapse');
// Use this instead of the data-toggle attribute to let [more/less] be clicked without collapsing panel
if ($(heading[0]).attr('class') == 'panel-heading') {
$(heading[0]).click(toggleSingleCollapse);
}
$(heading[0]).attr('data-target', '#panelBodyCollapse');
$(heading[0]).attr('id', 'panelHeading');
$(heading[0]).css('cursor', 'pointer');
$(bodyCollapse[0]).attr('id', 'panelBodyCollapse');
}
}
return numPanels;
}
function toggleSingleCollapse(e) {
if (!$(e.target).is('a') && !$(e.target).is('input')) {
var glyphIcon = $(this).find('.glyphicon');
var className = $(glyphIcon[0]).attr('class');
if (className.indexOf('glyphicon-chevron-up') != -1) {
hideSingleCollapse($(e.currentTarget).attr('data-target'));
} else {
showSingleCollapse($(e.currentTarget).attr('data-target'));
}
}
}
function showSingleCollapse(e) {
var heading = $(e).parent().children('.panel-heading');
var glyphIcon = $(heading[0]).find('.glyphicon');
$(glyphIcon[0]).removeClass('glyphicon-chevron-down');
$(glyphIcon[0]).addClass('glyphicon-chevron-up');
$(e).collapse('show');
$(heading).find('a.btn').show();
}
function hideSingleCollapse(e) {
var heading = $(e).parent().children('.panel-heading');
var glyphIcon = $(heading[0]).find('.glyphicon');
$(glyphIcon[0]).removeClass('glyphicon-chevron-up');
$(glyphIcon[0]).addClass('glyphicon-chevron-down');
$(e).collapse('hide');
$(heading).find('a.btn').hide();
}

Main thing in the above code is switch logic, which is used to hide/show the respective content.
The only thing switch logic is doing here to add/remove respective CSS class on the elements which control their visibility like accordion
Switch logic modules: showSingleCollapse(e) & hideSingleCollapse(e)
Beyond this there is logic for validation check like not to add same css class if it already has.
My Suggestion: There is better accordion logic out there in jQuery Accordion itself but you can refer this code to understand the real logic behind Accordion

Applying .click event only to links in a certain div-container

The code already creates a navigation based on a JSON-file. The url are accessible by writing data.chapter[].subchapter[].url, the according title through data.chapter[].subchapter[].title
In case you are interested in that part or want the complete code, I uploaded it there: http://fabitosh.bplaced.net/SkriptET_iFrame_v2/
The goal now is to create a right sidebar which shows the links to the next and previous files in the structure. My approach is below.
What confuses me, is that back() is called until subchap is zero, when a link in #left is being clicked on. It should only be called when the previous-link is being clicked on. What do I have to change in order to achieve that?
Thanks a lot already!
var chap; //position in the array of the currently open chapter
var subchap; //position in the array of the currently open subchapter
function update_right() {
var path = data.chapter[chap].subchapter;
//Previous Page
if(subchap > 0) {
$("#prev").html("<b>Previous:</b><a href='"+path[subchap-1].url+"'>"+path[subchap-1].title+"</a><br/>");
$("#prev > a").click(back());
} else { //subchap == 0
$("#prev").html("");
};
}
function back() {
subchap--;
update_right();
}
$(document).ready(function() // DOM needs to exist in order to be able to add stuff in there
{
...Navigation being built up...
//------ onClick Navigation
$('#left > ul > li > a').click(
function(e)
{
chap = $(this).attr("data-chap");
subchap = $(this).attr("data-subchap");
update_right();
}
);
});

Close accordion alike div using jQuery?

I have this simple code which shows 3 items
When I press the header ($(".fileHeader")) , it should open then next element which is the next element (hidden div) ($(".LST_Documents"))
sketch :
JSBIN : it does work.
Most important :
When I press on a $(".fileHeader")- i need to close all other $(".LST_Documents") and then ( that why i used promise) open the relevant $(".LST_Documents").
The problem is (look at the pic) if i press again on the first $(".fileHeader").
what is happening is that it closing and then re opening. and I want it to stay CLOSED.
P.S.
I could solve it with class ( .rowOpen or something like that) but I want to do it via JS/JQ only.
How can I enhance my code to work as expected ?

Just hold the header's content visibility state before sliding it up. And slide down the content only when it was not visible.
Here is the fiddle.
$(".fileHeader").on('click', function () {
var content$ = $(this).next(),
isContentVisible = content$.is(':visible');
$(".LST_Documents:visible").slideUp().promise().done(function () {
if ( ! isContentVisible ) {
content$.slideDown();
}
});
});

How 'bout a simple condition:
$(".fileheader").on('click', function() {
var next = $(this).next();
if(next.is(':visible'))
{
next.slideUp();
}
else
{
$(".LST_Documents:visible").slideUp().promise().done(function() {
next.slideDown();
});
}
});

jQuery slide changing with index and fadeout -- jumpiness

I am working on a jQuery slideshow plugin. One of my methods involves switching back and forth between pictures. I have been pretty successful in creating it, here is an isolated case with the code thus far for the particular method:
var images = $("#simpleslides").children("img");
$(".slideButtons ul li").on("click", "a", function() {
var anchorIndex = $(this).parent().index();
var $activeSlide = $("#simpleslides img:visible");
var $targetSlide = $(images[anchorIndex]);
if($activeSlide.attr("src") == $targetSlide.attr("src") || $targetSlide.is(":animated")) {
return false;
} else {
$activeSlide.css({ "z-index" : 0 });
$targetSlide.css({ "z-index" : 1 });
$targetSlide.stop().fadeIn("slow", function() {
$activeSlide.hide();
});
}
});
Here is a fiddle to see it in working action: http://jsfiddle.net/ase3E/
For the most part, this works as you would expect it to. When a user clicks on the corresponding number, it fades in the picture.
However, I am running into some jumpiness and occasionally a complete hide of the slides when I am clicking around quickly. If you play with the fiddle, you will see what I am referring to Try clicking around on each image to see.
I have adopted stop which I thought would fix the problem but has not. I have put the hide method after the fadeIn callback, but that has also not helped the situation.
What am I doing wrong here??

LIVE DEMO :)
var images = $("#simpleslides").find("img");
$(".slideButtons ul").on("click", "li", function(e) {
e.preventDefault();
var i = $(this).index();
images.eq(i).stop().fadeTo(500,1).siblings('img').fadeTo(500,0);
});

jQuery Animation, Chaining, .each() and .animate() (or fadeIn() and fadeOut())

I'm having a bit of a trouble trying to figure this out today, i want to make 5 items inside my DOM (which is listed under the same attribute element, $('.elements')) fade in and out, and after reading up a bit on the API i thought .each() would be a fabulous idea to implement a fade in and fade out showcase gallery.
However, i'm currently using:
$('.elements').each(function() {
$(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})
but everything gets faded in and out at once.
How do i do a sequential effect where everything is chained together and it starts from the first item in the list (a.k.a - $('elements').eq(0)?) down to the last one, and then restarts again?
Do i really need a while loop to do this in javascript/jquery? I was hoping there would be a similar function that i could chain for jQuery to perform to reduce load and filesize.
Also, is there a way to restrict the images from overflowing out from my div?

(function loop() {
$('.elements').each(function() {
var $self = $(this);
$self.parent().queue(function (n) {
$self.fadeIn(2000).delay(200).fadeOut(2000, n);
});
}).parent().promise().done(loop);
}());
demo: http://jsfiddle.net/uWGVN/2/
updated to have it looping without end.
2nd update: a different, probably more readable, approach:
(function fade(idx) {
var $elements = $('.elements');
$elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function () {
fade(idx + 1 < $elements.length ? idx + 1 : 0);
});
}(0));
​demo: http://jsfiddle.net/uWGVN/3/

You can add a callback
offical doc :
('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
and call the same function with i++ et $('.elements').eq(i)
http://jsfiddle.net/dFnNL/

For your overflowing , style it with CSS:
div.(class) { position:relative; overflow:hidden; }

Beautiful way :
(function hideNext(jq){
jq.eq(0).hide("slow", function(){
(jq=jq.slice(1)).length && hideNext(jq);
});
})($('a'))
last first :
(function hideNext(jq){
jq.eq(jq.length-1).hide("slow", function(){
(jq=jq.slice(0,length-1)).length && hideNext(jq);
});
})($('a'))