I would like to hide one div and show other div.
While hiding and showing other div, it should look like a slide, which can be achieved using slideToggle() in jQuery.
Please suggest the necessary changes in my javascript to make div appear as a slide when clicked on 1 or 2 to show corresponding div in the table. Please find the complete example in this fiddle.
When user clicks on 1 divOne12 should be shown and when user clicks 2 divTwo12 should appear and previous div should be hidden. How can i apply slideToggle() in the below javascript function.
Thanks.
Below is the javascript:
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).show().siblings('div').hide();
});
});
Example: http://jsfiddle.net/0p7djjnc/9/
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).slideDown(500).siblings('div').slideUp(500);
});
});
Is this what you're referring to?
Related
I have created a page where I have showing multiple boxes, and each box have three vertical dots on top right corner, when you click on those three dots it will open sub menu, for which I have used slidetoggle and what I wanted is when user click on the dots from one box it should show at once place only but right now its showing on all boxes, the jQuery I have written is not working as expected.
Here is the JSfiddle demo
For slide toggle I have the following JQuery:
$('.popout_info > a').click(function () {
$(".popout_info").next().slideToggle(200);
});
Can anyone please suggest how to handle this, if I assign ID to each DIV then in this case the boxes are going to be in unlimited numbers, may be something which can be handled dynamically?
Thanks in advance!
You have to change your jQuery function to achieve that as:
jQuery
$('.popout_info > a').click(function() {
$('.popout_list').slideUp(200);
var nextPopup = $(this).parent(".popout_info").siblings('.popout_list');
if (!($(nextPopup).is(':visible'))) {
$(nextPopup).slideToggle(200);
}
});
Here's your updated JSFiddle
I have made some amendments to hide any other open popup if one popup opens to disallow redundancy.
You are selecting every popup window. Try using :
$('.popout_list').slideUp(200);
$(this).closest('.doctor_wrapper').find('.popout_list').slideToggle(400);
You can use the following code to achieve this.
JS
$('.popout_info > a').click(function () {
$(this).parent().parent().find(".popout_info").next().slideToggle(200);
});
Or try this link
https://jsfiddle.net/wo1b58wj/7/
I used:
$('.popout_info > a').click(function () {
$(this).parent().next().slideToggle(200);
});
and it worked for me.
Side note: it's hard to click on those three dots because the box resize on mouse enter/leave
I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.
The problem I am having is getting the first dropdown to close if I hover over the second menu item.
Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C
I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered
So I apologize if this is a duplicate...any help would be appreciated. Thanks!
You can call slideup on the open ul before calling slidedown on the current one. like below
$(document).ready(function () {
$(".nav-basic").hover(function () {
$('ul.menu-applied').slideUp('medium');
$('ul.menu-basic').slideDown('medium');
});
$('ul.menu-basic').bind('mouseleave', function(){
$('ul.menu-basic').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
$('ul.menu-applied').bind('mouseleave', function(){
$('ul.menu-applied').slideUp('medium');
});
});
You just needed to update your script to call the slideUp function:
$(".nav-basic").hover(function () {
$('ul.menu-basic').slideDown('medium');
$('ul.menu-applied').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:
Example: $('.menu-interior:not(.menu-basic)').slideUp();
See forked fiddle here: http://www.bootply.com/DZxktgUtjh
Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.
So set an class="isHovered" on the element that is hovered.
Set the boxes class="isHovered" aswell ..
If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...
You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...
$(document).ready(function() {
$(".nav-basic").hover(function() {
$('ul.menu-basic').slideToggle('medium');
});
$(".nav-applied").hover(function() {
$('ul.menu-applied').slideToggle('medium');
});
});
With jQuery (or javascript), how can I have one button reveal different hidden (display: none) divs with each click? For example, on the first click of the button, div1 should appear. On the second click of the same button, div2 will appear also (so both div1 and div2 are visible). Same for div3, etc.
With the code I have now, the first button click reveals all the hidden divs at once. Here's an example:
$(document).ready(function () {
$('button').click(function () {
$('.div1').show('slow');
});
$('button').click(function () {
$('.div2').show('slow');
});
$('button').click(function () {
$('.div3').show('slow');
});
});
The reason they are all appearing at once is because what you have done now is appended three separate click handlers to the same object that each show in a separate div. Now every time you click on "button", all three of those functions are going to run.
What you could do is collect all the divs you want to show in one object, and keep a count of the amount of divs you have already shown in.
var count = 0,
$allDivs = $('.div1, .div2, .div3');
$('.button').click( function() {
if( count < $allDivs.length - 1 ) {
$allDivs.eq( count ).show( 'slow' );
count++;
}
});
If you select all the divs at once, then you can use jQuery's eq() method to pick them out one at a time.
Here is a working example on JS fiddle: http://jsfiddle.net/grammar/76arV/
Hope this helps!
var blocks = $('.div1, .div2, .div3');
$('button').click(function () {
if (block = blocks.next())
block.show('slow');
});
What about this?
var iShow = 0;
$('button').click(function () {
$('.show:eq(' + iShow + ')').show('slow');
iShow = iShow + 1;
});
So in this example i gave every element that you want to interact with the button the class .show. This way you can just select any of these element by the index value, you do this with .eq().
First .show element has the index value of 0, so that is where we start(our default value).
Each time we click we increasing the variable by one so next there is clicked, the next element will be showed.
Based on what you want to do next, you can do the same with hiding all the elements again one by one.
Hope this helped you.
jsFiddle
I'm really new to Jquery so I really need a some help from you guys.
I have created a button, when clicked a pop up menu will appear. Now I have created a script, what it does is when that button is clicked the sideshow on the site background will be hidden (this is to make the pop up menu much smoother), my question is after a user closes down the pop up menu, how can I reshow the hidden slideshow again , I believe it has something to do with this code onHide: function()
<script>
jQuery(document).ready(function(){
jQuery('.menubutton').click(function(){
jQuery("#slideshow").css({"display":"none"});
});
});
</script>
To show and hide alternatively use .toggle()
jQuery("#slideshow").toggle()
Demo: Fiddle
To Hide an element use .hide()
jQuery("#slideshow").hide()
To Display a hidden an element use .show()
jQuery("#slideshow").show()
I believe jQuery.toggle() is what you are after:
jQuery(document).ready(function () {
jQuery('.menubutton').click(function () {
jQuery('#slideshow').toggle();
});
});
Fiddle: http://jsfiddle.net/QGdLw/1/
I'm using the following JS to show and hive a responsive-specific menu. Basically, when an h4 is clicked, a list with my my within #secondary-navigation slides down. I'm using this menu on a page with page anchors, so I'd like the menu to slideUp when one of the menu items is clicked. How would I go about accomplishing this with my code below? Thanks for any help.
<script>
(function($) {
$(function() {
var header = $('h4', '#secondary-navigation');
header.click(function() {
if($(this).next().is(':hidden')) {
$(this).next().slideDown('fast');
} else {
$(this).next().slideUp('fast');
}
});
});
})(jQuery);
</script><!-- end mobile nav -->
Edit: I misread your question at first. You need to add a second function that triggers when one of the menu children is clicked. That's a separate event.
Assuming your menu items are wrapped in a div or ul with an id of #menu:
$('#menu a').click(function() {
$('#menu').slideUp('fast');
});
Add this as a separate function, outside of the one you posted above.