I am trying to hide accordion tabs which are not active and the last tab, however not much luck till now
Code I have till now:
$('#accordion > h3').each(function() {...});
var accordion, first, last, lastContent;
var i = 0;
$('#acc_Posts').children().each(function() {
accordion = $(this).attr("id");
if ($("#" + accordion).hasClass("ui-accordion-header")) {
if (i == 0) {
first = $(this).attr("id");
}
lastContent = $(this).next().attr('id');
last = $(this).attr("id");
if ($("#" + accordion).attr("aria-selected") == 'false') {
$("#" + accordion).hide();
};
}
i++;
});
$("#" + last).css({
'display': ''
});
$("#" + first).css({
'display': ''
});
I try to accomplish when user clicks on the body of active tab that all tabs are being hide except the active and last tab, when user clicks on the last tab all tabs will showup again. Sounds very simple but I cant figure this out.
Maybe somebody had tied to do the same?
Any help is appreciated!
To hide or show accordions you must use collapse, for example, toggling it:
$('#yourAccordion').collapse({toggle: true});
Related
I am using this javascript to turn on and off the display of certain content on a website, depending on the contents category set in the backend:
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(600);
} else {
var $el = $('.' + this.id).fadeIn(600);
$('.projekte > .post').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
When the content which is being set to active (i.e. is being displayed) it fades in nicely. How can I let the disappearing content fade out just as smoothly? As of right now it merely disappears instantly, which heavily breaks with the visual feel of the website.
A live demo of the script can be seen here: http://udkdev.skopec.de/category/projekte/
Have you tried fadeOut();?
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(600);
} else {
var $el = $('.' + this.id).fadeIn(600);
$('.projekte > .post').not($el).fadeOut(600);
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
Use the jQuery method - fadeOut() or define css transitions for the element class.
$('.projekte > .post').not($el).hide();
Can be replaced with
$('.projekte > .post').not($el).fadeOut();
I have a responsive accordion function inside a website and i want to (open) and (close) all content with one button that also change his content name to (open) when all content is closed and (closed) when all content is open.
Also now the content that already was opened closes again when using the (open) button and the plus and minus icons don't react the right way showing the (minus icon) when the content is closed and visa versa.
Here is the fiddle
Can someone help me with this?
// Accordion //
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
})
$('.toggle-btn').click(function(){
$('.content').slideToggle();
$(this).toggleClass('active');
})
There you go:
http://jsfiddle.net/w3srayj6/21/
// Accordion //
$(document).ready(function() {
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
$('.toggle-btn').addClass('active').trigger("change");
})
});
$(document).ready(function() {
$('.toggle-btn').change(function(){
var headers = $('.header');
var state = 'open';
$.each(headers,function(){
if($(this).hasClass('active'))
state = 'close';
});
if(state == 'open')
$(this).addClass('active')
$(this).text(state);
});
$('.toggle-btn').click(function(){
var current = $(this);
current.toggleClass('active');
current.trigger("change");
var contents = $('.content');
$.each(contents, function(){
if(!current.hasClass('active'))
$(this).slideUp();
else
$(this).slideDown();
});
var headers = $('.header');
$.each(headers, function(){
if(current.hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
});
current.trigger("change");
})
});
// Read more //
$(window).scroll(function() {
if ($(this).scrollTop() < 20) {
$('.read-more').slideDown(200);
} else {
console.log('there');
$('.read-more').slideUp(200);
}
});
Sometimes working with toggles may be a bit tricky and confusing.
In this case I used "hasClass" in order to determine if items are already open or not.
Since we have only "opened" and "closed" states, we can say that as long that "open" is not "Active" (has class active on it), we should add the "active" class flag to all headers and contents. same in the opposite situation.
this makes sure that already toggled items are not re-toggled.
To change your minus/plus icone with your button, you must select specific .header class with parent() and child() jQuery method like this :
$('.toggle-btn').click(function(){
$('.content').each( function() {
$(this).slideToggle();
$(this).parent().find('.header').toggleClass('active');
});
});
If you check for the class active after the toggle occurs, you can then change the text of the button depending on if the toggled class is active or not.
See this updated fiddle (edited to change the icons also)
I am attempting to have a link "onclick" js event that slides a specific div left. The following jsfiddle works if going from the first link through the third in that order. If going backwards, the div does not slide... I attempted re-zindexing so the div to slide is on top of the currently visible div, but that seems to not work.
http://jsfiddle.net/3qvro2pq/5/
function doShow(inDiv){
$(inDiv).zIndex(1);
$(inDiv).show({
effect:'slide',
direction:'right',
duration:1000,
complete:closeHidden
});
}
Please help.
You need to hide the other divs when the animation start, not when it is completet. Your code works, but the slide is not visible, because the active layer is on top until the animation finishes.
var curWindow;
function doShow(inDiv){
curWindow = inDiv;
$(inDiv).zIndex(1);
closeHidden();
$(inDiv).show({
effect:'slide',
direction:'right',
duration:1000
});
}
function closeHidden(){
$(".frameDiv").each(function(i){
if ("#" + this.id !== curWindow){
$("#" + this.id).hide();
$("#" + this.id).zIndex(99);
}
});
}
Here this works: http://jsfiddle.net/3qvro2pq/7/
EDIT: If you want to show the div until the animation is finished, set the zIndex before the animation starts and hide on complete.
EDIT2: This works.
var curWindow;
function doShow(inDiv){
curWindow = inDiv;
$('.frameDiv').zIndex(1);
$(inDiv).zIndex(10);
$(inDiv).show({
effect:'slide',
direction:'right',
duration:1000,
complete: closeHidden
});
}
function closeHidden(){
$(".frameDiv").each(function(i){
if ("#" + this.id !== curWindow){
$("#" + this.id).hide();
}
});
}
JSFiddle: http://jsfiddle.net/3qvro2pq/9/
Im using jQuery ui button to create divs that look like buttons dynamically. Clicking on these divs should open a dialog and clicking its icon should remove the div(button). Ive tried several different approaches but I cant seem to get the result I want.
Closest thing Ive achieved is by using onclick on both the icon & on the div itself, but the problem is that when clicking the icon I would first call the icon's onclick and then afterwards calling the div's onclick, which will cause the dialog to open after the div has been removed.
Ive also tried to add a disable property and set it to true on the div inside the icon's onclick and check for that inside the div's onclick but that dont work(I kinda get why.)
So my question is then: How can I create a button that will open a dialog when clicked on and with a icon that, when clicked on, removes the button?
Code:
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox' onclick='ButtonClicked(this);'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).delegate("span.ui-icon-circle-close", "click", function () {
var btnId = $(this).closest("div").remove().attr("aria-controls");
$("#" + btnId).remove();
});
$('.ui-icon-circle-close').attr('onclick', 'IconCloseClicked(this);');
}
function IconCloseClicked(value) {
$(value).parent().prop("disable", "true");
//alert($(value).parent().attr("id"));
alert("icon");
Remove($(value).parent());
}
function ButtonClicked(o) {
var test = $(o).prop("disable");
alert("div");
if ($(o).attr("disable") == undefined) {
Opendialog();
}
}
function Remove(value) {
$(value).remove();
}
function Opendialog() {
$("#dialog").dialog("open");
}
Ps. Reason why Ive used the button is because it is the widget that looks the most like what I want in jquery ui.
Updated(What I ended up with):
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).click(function (e) {
Opendialog();
});
$('.ui-icon-circle-close').click(function (e) {
$(this).parent().remove();
e.stopPropagation();
});
}
function Opendialog() {
$("#dialog").dialog("open");
}
I'm assuming the icon is a child element of the button div. When the icon is clicked, you need to stop the click event bubbling to the parent div. You can do this with event.stopPropagation()
$('.icon').click(function(e){
e.stopPropagation();
});
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});