I'm seeking a better way to rewrite a simple show / hide jQuery toggle that could allow implementation based on using div selectors; and without modifying HTML markup (so without added class .hidden etc)
I have a series of divs with class .djseform_field and no other selectors within; seeking to use only this class to turn these divs into show / hide jQuery toggles.
possibly something like this:
$(document).ready(function() {
// choose text for the show/hide link
var showText='read more...';
var hideText='hide';
// initialise the visibility check
var isVisible = false;
// append show/hide links to the element directly preceding the element with a class of "djseform_field"
$('.djseform_field').prev().append(' '+showText+'');
// hide all of the elements with a class of 'djseform_field'
$('.djseform_field').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
isVisible = !isVisible;
// change the link depending on whether the element is shown or hidden
if ($(this).html()==showText) {
$(this).html(hideText);
}
else {
$(this).html(showText);
}
// toggle the display
$(this).parent().next('.djseform_field').slideToggle('slow');
// return false so any link destination is not followed
return false;
});
});
Your jquery should look like :
$(document).ready(function() {
$('.toggle-div').click(function(){
$('.djseform_field').slideToggle( "slow", function() {
});
});
Your Html should :
<div class="djseform_field">111</div>
<div class="djseform_field">222</div>
<div class="djseform_field" >333</div>
toggle <!-- Whatever you want to on click hide / show divs for refs i used a tag -->
Related
I have a simple dropdown list, I want when the user toggles the dropdown list to show or hide another div using the jquery method slideToggle, unfortunately, I am struggling to solve the problem.
Expected: when the user clicks an icon it should show the list and hide another div (slideDown effect) when the user clicks again for closing the dropdown list (slideUp effect), I want to show the hidden div.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
console.log('do something')
if("slideDown"){
$('.dezynfekcja-dropdown').hide();
}else if("slideUP"){
$('.dezynfekcja-dropdown').show();
}
});
});
I tried adding a callback function but I don't know how to check the slide effect if it's slideDown or slideUp.
Any idea will be appreciated.
Once toggle finishes it basically hides or shows the element being toggled. So in the complete callback you can simply check if your element is shown or hidden.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
// `this` refers to the DOM element being toggled.
// We can use `is(":visible")` to check if it visible or not
let isVisible = $(this).is(":visible");
// show console message that tells us if element is hidden or visible
console.log(this.innerText, ' is now ', isVisible);
// use isVisible to do whatever you want show/hide etc
if(isVisible) {
$('.dezynfekcja-dropdown').hide();
} else {
$('.dezynfekcja-dropdown').show();
}
});
});
I want to use a Materialize CSS collapsible list for steps in an import process.
The next step's details will only be visible when the first step is completed, so I want to disable collapsing the panel when clicking it and manually trigger the event when the first step is completed.
I have tried onclick="return false;" but it is not working.
Any other ideas?
Turn off the event handlers for the collapsible.
Set css property 'pointer-events' to 'none' if you want the default cursor.
var $panel_headers = $('.collapsible').find('> li > .collapsible-header');
$('.collapsible').off('click.collapse', '.collapsible-header');
$panel_headers.off('click.collapse').css('pointer-events', 'none');
You can then display the panels by setting the 'display' property to 'block';
$('.collapsible-body').css('display', 'block');
This example applies to all the collapsible items on your page to demonstrate.
Modify the selectors to manipulate specific collapsibles.
The way I did this is to not initialize the collapsible at all and manually control when the collapsible-body is displayed.
For example here how you would control a collapsible using a switch (with Vanilla JS):
const addEmailCCSwitch = document.getElementById("add-email-cc-switch")
addEmailCCSwitch.addEventListener("click", (e) => {
const isChecked = addEmailCCSwitch.querySelector('input').checked;
if (isChecked) {
document.querySelector('.collapsible-body').style.display = "block"
} else {
document.querySelector('.collapsible-body').style.display = "none"
}
});
Here is a codepen with the functional example: https://codepen.io/dsudomoin/pen/zYBeYyW
I have a div toggle when an anchor is clicked. I'm trying to change an icon via class when the div is visible, and when it's hidden, but the code's not working.
Does anyone know how to do this?
// Toggle design/code
$(".design-n-code").click(function(e) {
code.toggle();
}); code.hide();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$(this).addClass('code-active');
} else {
$(this).removeClass('code-active');
}
You have to put the logic for checking the visiblity into the click handler. Otherwise, it will only execute once, and that is at the overall beginning of the script execution.
// Toggle design/code
$(".design-n-code").click(function() {
code.toggle();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$(this).addClass('code-active');
} else {
$(this).removeClass('code-active');
}
});
code.hide();
The test for the visibility of the code should be in the handler. In the handler, this is referring to the clicked element, so you must call addClass / removeClass to the element #icon-id instead (adapt #icon-id to your proper id).
// Toggle design/code
$(".design-n-code").click(function(e) {
code.toggle();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$('#icon-id').addClass('code-active');
} else {
$('#icon-id').removeClass('code-active');
}
});
code.hide();
You say you have an anchor which when clicked, toggles another element, a div. The use of 'this' when clicked won't change the other element's class then.
You would want something like this:
HTML
CLick me to toggle the other div
<div id="toBeToggled" class="IsShown">I have class abc</div>
JS
$('#toggler').click(function() {
var target = $('#toBeToggled');
if (target.is(":visible")) {
target.addClass('IsHidden').removeClass('IsShown');
target.hide();
// Demo purposes
console.log(target.attr('class'));
} else {
target.addClass('IsShown').removeClass('IsHidden');
target.show();
// Demo purposes
console.log(target.attr('class'));
}
});
JS FIDDLE EXAMPLE
I have the following div, which is hidden:
<div class="showDescription 73" style="display:none;">blah blah blah</div>
and then at the side of it:
<div class="more" divtoshow="73" style="cursor:pointer">more...</div>
I want to click the div with class more and it shows the hidden div, then change the word more... to less..., remove class more, add a class canHide to it so when clicked again it will hide the div again. Simple stuff. It becomes this:
<div class="canHide" divtoshow="73" style="cursor:pointer">less...</div>
When i click the word more the hidden div shows and adds a class canHide, but when clicking it again nothing happens and I don't know why.
JQuery - this section works as it should:
$('.more').click(function() { // show hidden div
var classId = $(this).attr('divToShow');
$("." + classId).fadeIn();
$(this).removeClass('more');
$(this).addClass('canHide');
$(this).html('less...');
});
This section does nothing??
$('.canHide').click(function() { // hide shown div
var classId = $(this).attr('divToShow');
$("." + classId).fadeOut();
alert('hey'); // for test purposes only
$(this).removeClass('canHide');
$(this).addClass('more');
$(this).html('more...');
});
Here be a fiddle
You're changing the class, so that handler (which is bound at runtime), has no idea that that new class exists. Use event delegation:
$(document).on('click', '.canHide', function() { // hide shown div
});
document should be the element that contains the element with the .canHide class and is there at runtime, but since I can't see your HTML, document is a safe bet.
this might be easier
$('.more').click(function() {
// show/hide element before .more && toggle text
$(this).html($(this).html()=='▼'?'▲':'▼').prev('.showDescription').stop().fadeToggle();
});
It also removes the corresponding attributes between the more link and content, as it makes them unnecessary. ie divtoshow/class 73
made a fiddle: http://jsfiddle.net/filever10/zXz3c/
update: here's each piece broken down
$('.more').click(function() {
// get element
$(this)
//if html = ▼ then it should now be ▲, or if html = ▲ then it should now be ▼; else it should be ▼
.html($(this).html()=='▼'?'▲':'▼')
//get previous element by class
.prev('.showDescription')
//clear its queue to prevent buildup
.stop()
//fadeIn if it's hidden or fadeOut if it's visible
.fadeToggle();
});
I have code that lets me to show an element on click of one element and hide it on click of another. Code looks like:
$('.downloads').hide()
$('.downloads').css({visibility:'visible'})
var Dshow=false;
$('.allLink').click(function() {
if(!Dshow){
Dshow=true;
$(".downloads").fadeIn("fast");
$('#footer2').html($('#footer1').html());
$('#footer1').html('');}
});
$('.hideAllLink').click(function() {
if(!!Dshow){
Dshow=false;
$(".downloads").fadeOut("fast");
$('#footer1').html($('#footer2').html());
$('#footer2').html('');}
});
I want $('.allLink').click(function() to have 2 states - on first click it shall show ".downloads" and on second click hide.
How to do such thing with jQuery?
You can use .toogle(). This method will hide element if it's visible, or make it visible if it's hidden.
$('.allLink').click(function()) {
$('.downloads').toggle();
}
I think what you are looking for is a toggler: Use of jQuery toggle function
Use
$( "#idofthebutton" ).toggle(
function() {
/// hide the link
$(".downloads").fadeOut("fast");
}, function() {
///show the link
$(".downloads").fadeIn("fast");
}
);
This will work automatically to hide and show the links....
Note: In this case keep the links visible at first place. If you don't want that then change the order of the functions inside the .toggle