I have several buttons including divs which they have the same name. unfortunately I can not change the names, they are generated by cms.
So for example when I click only on first button, only the first div is hidden or displayed, and that's fine.
But after refresh page it opens or closes all divs depending is the first div closed or opened, and that I do not want it.
And then i have created this code for testing, which works:
<button class="a">Button</button>
<div class="target"></div>
<button class="a">Button</button>
<div class="target"></div>
$('.a').click(function() {
$(this).next(".target").slideToggle(function() {
localStorage.setItem('visible-' + $(this).index(), $(this).is(":visible"));
});
});
$.each($('.target'), function(k, trg) {
$(trg).toggle(localStorage.getItem('visible-' + $(trg).index()) === 'true');
});
here you can see jsfiddle example: https://jsfiddle.net/pj3gs0z9/8/
and when I want to imply this method on this site: http://phpbb32.majordroid.com/index.php
for some unknown reason is not working
you need to click minus for close below, and plus to open. just try after that to refresh page, and for some reason it closes all or opens all divs below...
i have used this code:
$("ul.topiclist.collapse-btn").click(function(){
$(this).parent().parent().parent().next("ul.topiclist.working-collapse-btn").trigger('click');
$(this).toggleClass('plus');
});
$('ul.topiclist.working-collapse-btn').click(function() {
$(this).next("ul.topiclist.forums").slideToggle(function() {
localStorage.setItem('visible-' + $(this).index(), $(this).is(":visible"));
});
});
$.each($('ul.topiclist.forums'), function(k, trg) {
$(trg).toggle(localStorage.getItem('visible-' + $(trg).index()) === 'true');
});
Thank you
Related
This question already has an answer here:
Jquery - Close dropdown/remove active class when clicking outside or clicking another dropdown
(1 answer)
Closed 4 years ago.
I get this code (it is not written by me)
Problem that I am not able to solve is:
To hide that iframe - I need to click the same button again and I would like to hide it on clicking somewhere else - something like toggle()
For now I tried to create new code with toggle, but I had problems with getting the right id, which is saved in clicked button id,
I also tried to base my new code on answer here :
.on() & toggle working together
and jQuery on('toggle') possible?
My code - It displays an iframe from a dynamically created link, when you click the button in the datatable column.
$("#example tbody").on("click", "a.actions", function() {
const id = $(this).attr('href');
let clicks = $(this).data('clicks');
if (clicks) {
$('#' + id).css("display", "none");
} else {
$('#' + id).css("display", "block");
}
$(this).data("clicks", !clicks);
let src = 'https://web02.datacentre.local/master-database/master-task-view-actions/entry/' + id;
$('#' + id).attr('src', src);
return false;
});
You can do this:
$(document).ready(function() {
$("button").click(function() {
$("div.d1").toggle();
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button>Toggle</button>
<div class="d1" style="border:1px solid black;padding:10px;width:250px">
<p><b>This is a little poem: </b><br/> Twinkle, twinkle, little star<br/> How I wonder what you are<br/> Up above the world so high<br/> Like a diamond in the sky<br/> Twinkle, twinkle little star<br/> How I wonder what you are</p>
</div>
I have created a 3 x 2 grid of squareish buttons that are monotone in colour. I have a slidetoggle div that pops down inbetween both rows of 3 and as it does so it pushes the content down of the rest of hte page, this is all working perfectly so far.
But i have made a class (.active) thats css is the same as the :hover state so that when i hover over a button the coloured version replaces the monotone version, however i have tried to add some js to make the colour (.active) stay on once i have clicked on a certain button so that you can see which button (product) the slidedown div relates to and the rest are still in monotone around it...
The .active code below works perfectly to turn the bottons colour on and off when you click that one button, but i have set it up so that if one button's div is open and you click on a different one, the open one closes and then the new one opens. This feature however throws off the balance of the code i have for the .active state here. When you have say button 1 open and you click button 1 to close, this works fine, the color goes on and then off, but if yo uhave button 1 open and click on button 2, button 1's div closes and opens button 2's div but then botton 1 stays in colour as button 2 turns to colour. the order is thrown off...
I need to add some js to say, that only one button can be in color (.active) at a time, or that if one is .active it must be turned off before the new one is turned on... Please help :)
$(document).ready(function(){
$("a.active").removeClass('active'); //<<this .active code &
$("#product1").click(function(){
if($(this).parent('a').hasClass('active')){ //<<<this .active code
$(this).parent('a').removeClass('active'); //<<
}else{ //<<
$(this).parent('a').addClass('active'); //<<
} //<<
$("#product2box").slideUp('slow', function() {
$("#product3box").slideUp('slow', function() {
$("#product4box").slideUp('slow', function() {
$("#product5box").slideUp('slow', function() {
$("#product6box").slideUp('slow', function() {
$("#product1box").stop().slideToggle(1000);
//do i need
//something here??
});
});
});
});
});
});
And here is the HTML
<div id="row1">
<a href="#!" class="active"><span id="product1">
<div id="productblueheader">
<div id="productlogosblue1"></div>
</div>
<div id="productstitle">Stops all spam and unwanted email.</div>
<div id="producttext">With over 8 million users ******* is the leading in anit-spam software on the market today! Sort all your spam issues in one place now!</div>
</span></a>
<a href="#!" class="active"><span id="product2">
<div id="productblueheader">
<div id="productlogosblue2"></div>
</div>
<div id="productstitle">The easiest email encryption ever.</div>
<div id="producttext">In todays world, we won’t enter personal details in to untrusted websites, but we send personal information via regular (insecure) email all the time.</div>
</span></a>
<a href="#!" class="active"><span id="product3">
<div id="productblueheader">
<div id="productlogosblue3"></div>
</div>
<div id="productstitle">The easiest email encryption ever.</div>
<div id="producttext">****** is a revelation in security and ease of use. Get the best protection against viruses, spyware, scam websites and other threats.</div>
</span></a>
</div>
(then the same for row2 products 4-6)
you use .each() method of jquery and find .active class to remove it,
and then add .active class.
$(this).parent('a').each(function(){
$(this).removeClass('active');
});
$(this).parent('a').addClass('active');
This ought to work, but I couldn't test it without the relevant HTML:
$(document).ready(function () {
$("#product1").click(function () {
$("a.active").removeClass('active');
$(this).parent('a').toggleClass('active'));
$("#product2box").slideUp('slow', function () {
$("#product3box").slideUp('slow', function () {
$("#product4box").slideUp('slow', function () {
$("#product5box").slideUp('slow', function () {
$("#product6box").slideUp('slow', function () {
$("#product1box").stop().slideToggle(1000);
});
});
});
});
});
});
});
Also, there would probably be a better way to write all those sliding up functions. Do they really need to go on by one by the way?
$(document).ready(function() {
$(".producthandler").click(function() {
var ctx = $(this);
var productboxId = ctx.children().eq(0).attr("id");
ctx.toggleClass('active');
$("#" + productboxId + "box").stop().slideToggle(1000);
$(".producthandler").each(function() {
var ctx = $(this);
var producthandlerId = ctx.children().eq(0).attr('id');
if (productboxId !== producthandlerId) {
ctx.removeClass('active');
$("#" + producthandlerId + "box").slideUp(1000);
}
});
});
});
--EDIT--
I have the toggle Button with which slides left and right. The toggle and animation are working fine, but the problem comes when adding more than one instance of toggle button on the same page. When I click on a toggle button, All the toggle buttons are using the same VAR. So if you open one and then click another one, the second one doesn't slide open because it thinks is suppose to close. Where would you put the isChecked var so that it is different for each instance?
js fiddle
http://jsfiddle.net/amQCN/11/
$(document).ready(function() {
var isChecked = false;
$('.toggle-radio-switch').click(function() {
if (isChecked == true) {
$(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150');
isChecked = false;
console.log("isChecked = " + isChecked);
} else {
$(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150');
isChecked = true;
console.log("isChecked = " + isChecked);
};
});
});
radio-switch-slider is positioned on top of the contents and slides back and forth revealing yes or no
<div class="toggle-radio-switch" id="toggle3">
<span>yes</span>
<span>no</span>
<div class="radio-switch-slider"></div>
</div>
Working version incase anyone is wondering:
Ended up just using this instead
$('.toggle-radio-switch').click(function() {
if ($(this).find('.radio-switch-slider').css('margin-left')=="0px"){
$(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150');
} else {
$(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150');
}
});
I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
$(this).find('.radio-switch-slider')...
I'm trying to get JScrollPane to reinitialize on expand/collapse of my accordion found here. You can demo the accordion by clicking on one of the parents (Stone Tiles, Stone Sinks, Stone Wall Clading, etc).
Right now I set it as a click event using the following JQuery...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("ul#widget-collapscat-5-top > li.collapsing").click(function() {
$(this).delay(3000);
api.reinitialise();
});
It seems to work when you click the parent the second time, but not the first. I have no idea why but I went into trying to edit the JS for the accordion so that I can add this function when the collapse is complete (as opposed to trying to do this click workaround). The collapse JS can be viewed here.
I tried to add the JS for the reinitialize function here, but I think I'm not doing something properly.
May you point me in the right direction?
Thanks!
The api.reinitialise() is working properly. What is happening is that it updates the size when you click, and at this moment the element is not expanded yet. You may notice that if you expand, colapse and expand again the same section, nothing happens. But if you expand one and then click another one, the ScrollPane will adjust to the size of the first expanded element.
You can solve this with events: place $(this).trigger('colapseComplete') when the colapse ends. Then you can use:
//Listening to the colapseComplete event we triggered above
$("#widget-collapscat-5-top > li.collapsing").on('colapseComplete', function() {
api.reinitialise();
});
Maybe you can alter the addExpandCollapse function to call the reinitialise function at the end of each of its click actions this way :
function addExpandCollapse(id, expandSym, collapseSym, accordion) {
jQuery('#' + id + ' .expand').live('click', function() {
if (accordion==1) {
var theDiv = jQuery(this).parent().parent().find('span.collapse').parent().find('div');
jQuery(theDiv).hide('normal');
jQuery(this).parent().parent().find('span.collapse').removeClass('collapse').addClass('expand');
createCookie(theDiv.attr('id'), 0, 7);
}
jQuery('#' + id + ' .expand .sym').html(expandSym);
expandCat(this, expandSym, collapseSym);
api.reinitialise(); // HERE
return false;
});
jQuery('#' + id + ' .collapse').live('click', function() {
collapseCat(this, expandSym, collapseSym);
api.reinitialise(); // and HERE
return false;
});
}
and to be on a safer side, make sure you have the var api = pane.data('jsp'); line before the above piece of code anywhere in the file.
I am changing an accordion structure () and changing it based on a choice using AJAX.
The problem is, based on the accordion docs, I expect it to work like
<h3>header</h3>
<div><anything></anything></div>
Making the h3 stuff the header and the div stuff the body, but when I use ajax to dynamically create it it screws up. This code specifically uses the correct header for the first accordion box, but the body is empty and the next header becomes "There are no open session windows..." which is clearly not what I wanted. The JSON this gets is here: http://benbuzbee.com/trs/json.php?show=sessions&courseid=5
$(function() {
$("#courseselect").change(function () {
$("#testselect").accordion("destroy").html(""); // Empty any previous data
$("#testselect").css("display", "block"); // Display it if it was hidden
$.getJSON('json.php?show=sessions&courseid=' + $(this).val(), function(data) {
for (x in data)
{
$("#testselect").append("<h3>" + data[x].name + "</h3>");
$("#testselect").append("<div>");
if (!data[x].sessions)
$("#testselect").append("<p>There are no open session windows for this test.</p>");
for (si in data[x].sessions)
{
$("#testselect").append(""+data[x].sessions[si].location+"");
}
$("#testselect").append("</div>");
}
$("#testselect").accordion();
//$("#testselect").accordion({ change:function(event, ui) { courseid = ui.newHeader.attr("value"); }
}); // End getJSON
}); // end .change
}); // end $()
I think I see a few problems.
Your statement
$("#testselect").append("<div>")
will append BOTH an opening and a closing tag to #testSelect like this:
<div id='testselect'><h3><a> </a> </h3><div></div> </div>
Any further appending to #testselect will append elements AFTER the div tags.
Your next statement,
$("#testselect").append("<p>There are no open session windows for this test.</p>");
Will do this
<div id='testselect'><h3><a></a></h3><div></div><p> There are no open session windows for this test. </p> </div>
Your statement
$("#select.").append("</div>")
will NOT append a closing div tag to #testselect like you seem to be intending. Instead, it will do nothing.
You should change your for loop to something like this:
for (x in data)
{
var $header = $("<h3>").appendTo("#testSelect");
$header.append("" + data[x].name + "")
var messageContainer = $("<div>").appendTo($header);
if (!data[x].sessions)
messageContainer.append("<p> There are no open session windows for this test </p>");
for (si in data[x].sessions)
{
messageContainer.append(""+data[x].sessions[si].location+"");
}
$("#testselect").accordion();
}