i have this script i copied from the internet. i want to control the accordion event(close current div and open next div) with a button
<button> Click me to open next</button>
in the div instead of the
<h3 id="section1">Section 1</h3>
.
Am new to jquery and javascript any help would be well appreciated.
this is the fiddle to my code:fiddle
From your particular fiddle. I modified it a little bit, and bind the button click onto click on <h3> tags, like you were clicking them manually. From there, for every click of button, it just clicks the next <h3>. Consider this example:
$(function () {
$("#accordion").accordion({
activate: function (event, ui) {
//alert($(ui.newHeader).attr("id"))
}
});
$('button').on('click', function(){
var current_index = $(this).parent().next('h3').index();
if(current_index != -1) { // just checks if its the last
$(this).parent().next('h3').trigger('click');
} else {
$('h3#section1').trigger('click');
}
});
});
Sample Fiddle
Related
I currently have a header with a toggle button which will expand on click.
Html :
<h3 class="toggle_header" id="Tax_information_eSignature">
<spring:message code="TaxInformation.eSignature" />
<label for="Tax_information_eSignature"></label>
</h3>
JS:
$(document).on('click', '.icon_toggle_open', function (e) {
stop(e);
$(this).removeClass("icon_toggle_open")
.addClass("icon_toggle_close")
.attr("alt","Show")
.attr("title","Show")
.parent().next('.toggle_content').hide();
$(window).blur();
});
$(document).on('click', '.icon_toggle_close', function (e) {
stop(e);
$(this).removeClass("icon_toggle_close")
.addClass("icon_toggle_open")
.attr("alt","Hide")
.attr("title","Hide")
.parent().next('.toggle_content').show();
$(window).blur();
});
It is currently working as expected. The user needs to click on the toggle icon to expand the div.
Instead of clicking on the expand button, I want the Expand/collapse to be triggered upon clicking anywhere in the accordion bar. I am new to JSP, can anyone help?
You want to set the event listener higher in the DOM. Try moving your event listener from .icon_toggle_open to .toggle_header.
$(document).on('click', '.toggle_header', function (e) {
stop(e);
var opened = $(this).children('.icon_toggle_open')
if(opened.length > 0){
opened
.removeClass("icon_toggle_open")
.addClass("icon_toggle_close")
.attr("alt","Show")
.attr("title","Show")
.parent().next('.toggle_content').hide();
} else {
$(this)
.children(".icon_toggle_close")
.removeClass("icon_toggle_close")
.addClass("icon_toggle_open")
.attr("alt","Hide")
.attr("title","Hide")
.parent().next('.toggle_content').show();
}
$(window).blur();
});
Apply and event listener to the entire h3 instead of the a tag:
document.querySelector('#Tax_information_eSignature').addEventListener('click', e => {
// Expand your accordion bar by selecting it
});
I don't know how you have set up the 'expansion' feature but I would like to see how you've done your javascript to expand the accordion bar.
I'm having some issues figuring out why my click function isn't working.
I have a JSFiddle for it here: http://jsfiddle.net/adbakke/ve9oewvh/
My html breaks down like so (condensed for posting here):
<div class="projectDisplay"></div>
<div class="flex-grid project-list">
<div id="project1" class="project">
<div class="projectImg"><img></div>
<div class="projectDesc">
<h3>title</h3>
<p>Description</p>
<span>click to close</span>
</div>
</div>
Now my JQuery gets all that HTML under "project" like so:
$('.project').click(
function() {
var newGet = $(this).html();
Then there's a bunch of functions (that all work beautifully) to add this data to <div class="projectDisplay"></div>, and replace it all if there's already something there.
Then when I want to close the project by hitting <span> click to close</span>, it works fine when I click the first item, but if I click a second before closing it does not work.
Edit: Click one image, then (before hitting close), click a second image in the project list, and then attempt to click "close project".
My close function looks like so:
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
I have tried putting it both inside and outside the scope of my click function itself. Neither will allow me to have it close upon clicking a second time to open up a different project.
What am I missing?
Update:
Updated JSFiddle base so you can tell the different sections are different.
Instead of:
$('.closeMe').click(
Which will bind the click event for all .closeMe elements present in the DOM at that moment
use:
$(document).on('click', .closeMe,
Which will bind the click event to body and then delegate it to .closeMe, meaning that it will fire for .closeMe elements added dynamically even after the initial binding.
i.e
$(document).on('click', '.closeMe',
function() {
$('.projectDisplay').fadeOut(500);
}
);
Try it at http://jsfiddle.net/L4Lmf6zy/1/
You should delegate the click event on .clickMe because you are adding the button dynamically on every opening of a project.
Working example here http://jsfiddle.net/ve9oewvh/3/
So you should use
$(document).on('click', '.closeMe',
function() {
$('.projectDisplay').fadeOut(500);
}
);
The problem is you are removing all child nodes when you click on another project and you are not rebinding the click function. You need to rebind the click event with the new HTML.
$(document).ready( function () {
// Hide the Description, Close Button and Link to Site
$('.projectDesc a, .projectDesc p, .projectDesc span').hide();
// What happens when you click the project button
$('.project').click(
function() {
var newGet = $(this).html();
if ($('.projectDisplay').is(':empty')) {
// Add the description section if empty
$(newGet).hide().appendTo('.projectDisplay').fadeIn(500);
$('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
} else {
// If description is not empty, fade out, empty and add new project description
$('.projectDisplay').fadeOut(500, function (){
$('.projectDisplay').empty().append(newGet).fadeIn(250);
$('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
})
};
$('html, body').animate({
// scrollTop: $(".projectDisplay").position().top
scrollTop: $(".projectDisplay").offset().top - 200
}, 750);
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
});
});
// End of Project Click Function
Problem statement
I need to add bootstrap popover at runtime ,
i followed this fiddle link for example.
i have forked the above fiddle to customise as per my need
Link to my fiddle
i am trying to add new bootstrap popover on button click, Link is added successfully but pop over dosent work.
HTML
<div class="well">
Click to toggle popover
<a class="btn bad">Bad button</a>
</div>
javascript
var $popover = $('[data-toggle=popover]').popover();
//first event handler for bad button
$('.bad').click(function () {
alert("clicked");
});
$(document).on("click", function (e) {
var $target = $(e.target),
isPopover = $(e.target).is('[data-toggle=popover]'),
inPopover = $(e.target).closest('.popover').length > 0
//does absolutely nothing. Only wastes memory
$('.bad').click(function () {
console.log('clicked');
return false;
});
//hide only if clicked on button or inside popover
if (!isPopover && !inPopover) $popover.popover('hide');
});
Dependencies:
jquery 1.9.1
bootstrap-combined.min.css
bootstrap.min.js
Thanks in advance
you need to initialize the popover after adding.
var $popover = $('[data-toggle=popover]').popover();
see this fiddle
I've gotten an piece of Jquery code which lets the user click a link which will open an popup with information. But I don't know how to modify it so that the popup automaticly opens up when the user loads the page.
Jquery:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function ($) {
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
});
$(document).keyup(function (e) {
if (e.keyCode == 27 && $('html').hasClass('overlay')) {
clearPopup();
}
});
$('.popup-exit').click(function () {
clearPopup();
});
$('.popup-overlay').click(function () {
clearPopup();
});
function clearPopup() {
$('.popup.visible').addClass('transitioning').removeClass('visible');
$('html').removeClass('overlay');
setTimeout(function () {
$('.popup').removeClass('transitioning');
}, 200);
}
});
});//]]>
</script>
Link to activate the code:
Link
Content of popup window:
<div id="example-popup" class="popup">
<div class="popup-body"> <span class="popup-exit"></span>
<div class="popup-content">
<h2 class="popup-title">Terms and Conditions</h2>
<p>
<h5><font color="grey">Please take time to read the following...</font></h5>
</div>
</div>
</div>
<div class="popup-overlay"></div>
I've tried modifying it mysql, but it didn't work out. As I'm not an expert in Jquery.
I know it is a big ask, but the code is here. And I know some geek can easily find what I need :)
So real quick. Instead of having the user to click the link to open the popup. I want the popup to automaticly open
Reasonably simple when you trigger a click on the element you want after you register the click handler.
/* your original code stays mostly the same except for chaining methods after it*/
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
/* now click the first one */
}).first().click();
ID's must be unique in a page, so you should change the duplicates on the popup link and popup container if they are the same as shown
I have a web page where there is a button, when the button is clicked a Textbox is added to a DIV. Here is a similar code that I'm working with:
HTML
<button class="addText">Add Textbox</button>
<div class="textCont">
</div>
JavaScript
$(document).on("click", ".addText", function() {
var textarea = $("<textarea/>", {class: "newText"});
$(".textCont").append(textarea);
});
$(document).one("focus", ".newText", function() {
alert("Great");
});
Fiddle: http://jsfiddle.net/ErRohitAgg/g3A7T/
What I'm trying to do is to show an alert for first focus of every textbox that is added. But, instead the focus event is executing only once, and not once for each Textbox.
Is there any way the event behaves according to the functionality I need??
Add the event handler to each textarea instead
$(document).on("click", ".addText", function() {
$("<textarea/>", {
'class': 'newText',
one : {
focus: function() {
alert("Great");
}
}
}).appendTo(".textCont");
});
FIDDLE
I would rather do it by adding newclass on first focus:
$(document).on("focus", ".newText", function() {
if(!$(this).hasClass('focused')){
$(this).addClass('focused')
alert("Great");
}});
Working Demo