I have this code but I'm not sure how to make it so that each time one button is clicked, it closes the other div that is already open. New to jquery!
HTML:
<p class="profile-name">Name</p><br>
<p class="profile-title">Documentation Officer</p><br>
<button id="button-g" class="bio-button">Bio</button><br>
<a class="profile-email" href="mailto:email#test.com">email#test.com</a>
<div class="toggler">
<div id="effect-g" class="profile-bio">
<p>Bio information. Bio Information</p>
</div>
</div>
JQUERY:
<script>
$(function() {
$( "#button-a" ).click(function() {
$( "#effect-a" ).slideToggle( "visible");
});
$( "#button-b" ).click(function() {
$( "#effect-b" ).slideToggle( "visible");
});
$( "#button-c" ).click(function() {
$( "#effect-c" ).slideToggle( "visible");
$("#button-b").hide();
});
$( "#button-d" ).click(function() {
$( "#effect-d" ).slideToggle( "visible");
});
$( "#button-e" ).click(function() {
$( "#effect-e" ).slideToggle( "visible");
});
$( "#button-f" ).click(function() {
$( "#effect-f" ).slideToggle( "visible");
});
$( "#button-g" ).click(function() {
$( "#effect-g" ).slideToggle( "visible");
});
});
</script>
It's rarely wise to target a zillion elements by ID (or any other unique attribute) in a uniform, repetitive structure. Give all your buttons and all your collapsible siblings the same classes, respectively, then do this (or something similar--I can't be more specific without seeing your HTML):
$('.my-button-class').click(function() {
$(this).next('.my-collapsible-div-class').slideDown()
.siblings('.my-collapsible-div-class').slideUp();
});
This assumes markup like this:
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
Update based on your HTML:
$('.bio-button').click(function () {
$(this).nextAll('.toggler:first').slideToggle()
.siblings('.toggler').slideUp();
});
Demo
http://api.jquery.com/nextall
http://api.jquery.com/first-selector
Off-topic suggestion: Use CSS margin or padding rather than line breaks to format your content. Extra markup elements for spacing is ugly and inefficient.
Give the div's a common class, and a custom data attribute with the letter of the next div to open, then combine this into a single function. Sample div:
<div id="effect-a" class="effect"></div>
Sample button
<button id="button-a" class="button" data-letter="a">Click me</button>
Single function
$(".button").click(function() {
//Slide up any open divs
$(".effect").slideUp();
var divLetter = $(this).data("letter") //a
//Concatenate selector
$("#effect-" + divLetter).slideDown();
});
Related
I am developing a super simple site using jQuery and bootstrap libraries but I would like the menu items to jump to the section (already done with anchors). But when I navigate back to the top the menu dropdown is still open. How would I setup up a toggle so it closes on clicking a menu item?
This is my initial code:
$( document ).ready(function() {
$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
});
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<div class="menu">
<ul>
<li>Home</li>
<li>Jeff Anderson</li>
<li>Hand Built Frames</li>
<li>Bike Repairs and Maintenance</li>
<li>Frames and Accessories</li>
<li>Contact</li>
</ul>
</div>
</div>
Any help greatly appreciated. Thanks.
Anything that gets to the document will hide the dropdown
$(document).click(function(){
$("#dropdown").hide();
});
Clicks within the dropdown won't make it past the dropdown itself
$("#dropdown").click(function(e){
e.stopPropagation();
});
I believe adding these code will solve your problem.
I have different divs which all have the same class "textBox".
At the same time there should always just be one box displayed. For most Boxes there is a button on the bottom of my page which can be clicked and triggers
to make the box visible and hide the box which is already shown at this moment.
Edit: Fiddle https://jsfiddle.net/8uvsq7ta/
For this I have this JS-code:
$( "#gettingStartedButton" ).click( function () {
if (! $( "#gettingStarted" ).is( ":visible" ) ) {
if ( $( "#extension" ).is( ":visible" ) ) {
$( "#extension" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#executingBox" ).is( ":visible" ) ) {
$( "#executingBox" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#feedback" ).is( ":visible" ) ) {
$( "#feedback" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#impressum" ).is( ":visible" ) ) {
$( "#impressum" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#registration" ).is( ":visible" ) ) {
$( "#registration" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
}
else {
$( "#gettingStarted" ).fadeOut( function () {
$( "#executingBox" ).fadeIn();
});
}
});
The div boxes look like this:
<div id="gettingStarted" class="textBox">
test blabla
</div>
<div id="feedback" class="textBox">
test blabla
</div>
<div id="registration" class="textBox">
test blabla
</div>
<div id="impressum" class="textBox">
test blabla
</div>
CSS:
.textBox {
diplay: none;
}
This Code checks if the box is already shown and if yes it checks EVERY OTHER BOX to get the one which is visible and then fade it out to afterwards fade the reffered box in.
My problem is, I need this part of code for every box. I think there should be a better way to accomplish this.
What I am searching is kind a method openBox(id) where I give the id of the box as paramete and it automatically detects all other boxes with the class parameter and detects which is already faded in, then fades this out to fade the box with the id in.
Sadly my javascript skills aren't that good, so I seek to find some advices or examples how to achieve this.
Thank you very much for every input you can give me.
var $textBox = $(".textBox"); // get 'em all!
$textBox.eq(0).fadeIn(); // FadeIn first one
$("[data-showid]").on("click", function(){ // Buttons click (Use data-* attribute!)
var $box = $("#"+ this.dataset.showid); // Get the target box ID element
$textBox.not($box).hide(); // Hide all bot targeted one
$box.stop().fadeToggle(); // FadeToggle target box
});
.textBox{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gettingStarted" class="textBox">getting started blabla</div>
<div id="feedback" class="textBox">feedback blabla</div>
<div id="impressum" class="textBox">impressum blabla</div>
<button data-showid="gettingStarted">GS</button>
<button data-showid="feedback">FB</button>
<button data-showid="impressum">Imp</button>
If you don't want the current box to toggle, than instead of .fadeToggle() use .fadeIn().
http://api.jquery.com/fadetoggle/
https://api.jquery.com/data/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
With the addition of a data-* attribute on your button to link it to its content:
<button id="gettingStartedButton" data-link="gettingStarted">GS</button>
<button id="feedbackButton" data-link="feedback">FB</button>
<button id="impressumButton" data-link="impressum">Imp</button>
The javascript becomes very simple:
$( "#gettingStarted" ).fadeIn();
$('button').click(function(){
var link = $(this).data('link');
$('.textBox:visible').fadeOut(function(){
$('#' + link).fadeIn()
});
})
Updated fiddle: https://jsfiddle.net/8uvsq7ta/2/
I did it using class. The HTML would be like :
<div class="textBox gettingStartedButton" style="display: none;"> 1 test blabla </div>
<div style="display: none;" id="feedback" class="textBox .gettingStartedButton gettingStartedButton"> 2 test blabla </div>
<div id="registration" class="textBox gettingStartedButton" style="display: block;">3 test blabla </div>
<div id="impressum" class="textBox"> 4 test blabla </div>
And use the code below. Keep any element visible at first. Then on click of that element it fades it out and fades the next element in. and adds the class "gettingStartedButton" to the visible element to run click event again.
$( ".gettingStartedButton" ).on('click', function () {
var visible_element = $('.textBox:visible');
visible_element.next().fadeIn();
visible_element.next().removeClass('gettingStartedButton');
visible_element.next().addClass('gettingStartedButton');
visible_element.fadeOut();
});
I am using jQuery droppable and I am trying to redirect to another page once the draggable element is dropped.
Here is my code:
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
window.location.href = 'Section8.php';
}
});
});
</script>
<div id="draggable" class="ui-widget-content">
</div>
<div id="droppable" class="ui-widget-header">
</div>
For some reason this doesn't do anything, anyone know why this is?
You need to use window.location= 'Section8.php' instead of window.location.href= ... The window.location.href property returns the URL of the current page.
I'm using toggleClass like in the following example on the jQuery documentation page to create a "Read More"/"Read Less" solution:
http://api.jquery.com/toggleClass/
Here is the HTML code I'm using:
<span id="block1-link" class="read-more-text more">Read More</span>
<span id="block1-content" class="sh-content">1st paragraph text<span class="read-more-text"> Hide Text</span></span>
<span id="block2-link" class="read-more-text more">Read More</span>
<span id="block2-content" class="sh-content">2nd paragraph text<span class="read-more-text"> Hide Text</span></span>
And the accompanying jQuery:
(function ($) {
$( ".read-more-text" ).click(function() {
$( ".sh-content" ).toggleClass( "show-text" );
$( ".read-more-text.more" ).toggleClass( "hide-text" );
});
}(jQuery));
Right now, the code shows both blocks of text when I click on the "Read More" link. I'd like the click to only affect the related "block". So, if I click on the span with "block1-link", the span with "block1-content" should toggle.
The reason I'm not adding the ID directly to my jQuery code is because this needs to work for any number of link/content groupings on a page.
I'm sure it's something obvious I'm missing. I hope someone can help me correct what I've written.
Thanks!
You can use current element clicked context this to only target the clicked and next div element:
$( ".read-more-text" ).click(function() {
$(this).next().toggleClass( "show-text" );
$(this).toggleClass( "hide-text" );
});
Try this. You can use .on() of jquery.
$(".read-more-text" ).on( "click", function() {
$(this).next().toggleClass("show-text");
$(this).toggleClass("hide-text");
});
Edit: Developing further on the same topic, i tweaked the html classes so that its cleaner and easier.
<span id="block1-link" class="read-more">Read More</span>
<span id="block1-content" class="sh-content">1st paragraph text<span class="hide-more"> Hide Text</span>
</span>
<span id="block2-link" class="read-more">Read More</span>
<span id="block2-content" class="sh-content">2nd paragraph text<span class="hide-more"> Hide Text</span></span>
$(".read-more" ).on( "click", function() {
$(this).next().toggleClass("show-text");
$(this).toggleClass("hide-text");
});
$(".hide-more" ).on( "click", function() {
$(this).parent().toggleClass("hide-text");
$(this).parent().prev().toggleClass("show-text");
});
I've researched many posts and I still did not find a solution, either all sliderboxes (a box which slideDown() on click) open simultaniously with $('[id^="sliderbox-"]') or I just simply dont understand how to apply the jquery code specifically to my slider.
This is my code:
$( "#open2" ).click(function () {
if ( $( "#sliderbox2" ).is( ":hidden" ) ) {
$( "#sliderbox2" ).slideDown( "slow" );
$( ".arrow2").delay(300).fadeIn(500);
$(".balken2").delay(500).fadeIn(500);
$( "#sliderbox" ).slideUp( "slow" );
$( ".arrow" ).fadeOut(100);
$( ".balken" ).fadeOut(100);
var y = $(window).scrollTop(); //your current y position on the page
$('html, body').animate({
scrollTop: y+150
},500);
} else {
$( "#sliderbox2" ).slideUp( "slow" );
$( ".arrow2" ).fadeOut(100);
$( ".balken2" ).fadeOut(100);
}
});
I guess you can already see the "2" cause this is the second sliderbox to be opened, there are also the arrows for the slider which fade in and a thick border in the button.
I have 20 sliders, and i dont want to repeate css and jquery code 20 times!
This is the html:
<img src="images/pfeilunten2.png" class="pfeilunten" style="margin-left:0;" id="open3"/>
<div id="sliderbox3" class="sliderbox">
<div id="carousel">
<div id="carousel_inner">
<ul id="carousel_ul3" class="carousel_ul">
<div id="zentriercarousel">
<li>...</li>
</div>
</ul>
</div>
<div class="scroll_left scroll">
<img src="images/arrowleft.png" class="arrow3" /> </div>
<div class="scroll_right scroll">
<img src="images/arrowright.png" class="arrow3" />
</div>
<input id="hidden_auto_slide_seconds" type="hidden" value="0" />
<div class="balken3"></div>
</div>
</div>
Ans as you can see, there is already code for the third slider, and i have to rename EVERYTHING. That really sucks! Your help would be so much appreciated, please answer specific on this code, thanks in advance!
The way I would approach this is to give all the links that open a slider a class, say "open", I would give them all a data-slider property, something like this:
Open Slider
You jquery function can then become generic:
$( ".open" ).click(function () {
var sliderNumber = $(this).data("slider");
if ( $( "#sliderbox" + sliderNUmber ).is( ":hidden" ) ) {
$( "#sliderbox" + sliderNUmber ).slideDown( "slow" );
$( ".arrow" + sliderNUmber).delay(300).fadeIn(500);
$(".balken" + sliderNUmber).delay(500).fadeIn(500);
$( "#sliderbox" ).slideUp( "slow" );
$( ".arrow" ).fadeOut(100);
$( ".balken" ).fadeOut(100);
var y = $(window).scrollTop(); //your current y position on the page
$('html, body').animate({
scrollTop: y+150
},500);
} else {
$( "#sliderbox" + sliderNUmber ).slideUp( "slow" );
$( ".arrow" + sliderNUmber ).fadeOut(100);
$( ".balken" + sliderNUmber ).fadeOut(100);
}
});
Now your slider function is more generic, and you can re-use it as many times as you want, just have to make sure you add the data-slider number to each link and make sure the sliding elements have the right IDs
Hope this helps.