jquery hide/show divs troubleshooting

jquery hide/show divs troubleshooting

By : user2950174
Date : November 17 2020, 11:52 AM
Hope this helps I have a series of links to hide/show six different divs. I want the page to load where all of the six divs are hidden. Upon clicking on one of the six links, the respective div should fade in. When clicking on any of the other links, the current should fade out, and the newly selected div should appear. , I believe you are looking for something like this:
code :
$(document).ready(function() {
    $("a").on('click', function (e) {
        var currentElement = $(e.currentTarget);
        var divToShow = currentElement.attr('href'); // grab the id of the div we need to show
        // now find an visible divs
        var visibleDiv = $('div').filter(function() { return $(this).is(':visible'); });

        if (visibleDiv.length) // if there is a div already visible, fade it out then fade in the target div
            $(visibleDiv).fadeOut(400, function() {
        else $(divToShow).fadeIn(); // fade it in.
<a href="#Strategy" id="1" class="hideShow">Strategy &amp; Theme Development</a>
<a href="#Graphics" id="2" class="hideShow">Graphics</a>
<a href="#Jury" id="3" class="hideShow">Jury Selection</a>
<div id="Strategy" class="hideable">The strategy div</div>
<div id="Graphics" class="hideable">The Graphics div</div>
<div id="Jury" class="hideable">The Jury div</div>
$(document).ready(function() {
    $(".hideShow").on('click', function (e) {
        // you clicked one of the `.hideShow` a tags!
        // now filter through all the divs with `class="hideable"` to find a visible one
        var visibleDiv = $('.hideable').filter(function() { return $(this).is(':visible'); });

Share : facebook icon twitter icon
jQuery - How to show/hide multiple DIVs with child DIVs

jQuery - How to show/hide multiple DIVs with child DIVs

By : Mohsen Attary
Date : March 29 2020, 07:55 AM
help you fix your problem I've got a markup as follows (code modified from http://jsfiddle.net/nick_craver/srg6g/): , The problem is the selector on this line:
code :
$("#areas div").hide();
$("#areas > div").hide();
$("#areas > div").not("#london, #london div").hide();​
Troubleshooting of JavaScript/JQuery code with .show() and .hide() functionality

Troubleshooting of JavaScript/JQuery code with .show() and .hide() functionality

By : Blake
Date : March 29 2020, 07:55 AM
this will help You're using a submit button and not preventing it's default behaviour, hence why it's submitting the form and you're only seeing the change for a split second before the form is submitted.
Instead, you could use something like:
code :
<button type="submit" class="btn btn-default" id="main_search" onclick="OpenSearchScreen(); return false;">
   Switch to Search   
Javascript / JQuery - Hide 5 Divs, then Show 3 Random Divs

Javascript / JQuery - Hide 5 Divs, then Show 3 Random Divs

By : Miguel Tapia
Date : March 29 2020, 07:55 AM
I hope this helps . this is weird, but its working fine for me without repeating divs http://jsfiddle.net/#&togetherjs=ETkPlK9C1U
jQuery hide/show different elements troubleshooting

jQuery hide/show different elements troubleshooting

By : Muhd Fakhrul
Date : November 01 2020, 11:01 PM
help you fix your problem I'm trying to program a website, and now that I have designed my front, I want a link in the header saying "Portfolio" which should hide everything but the header and footer.
code :
$('#front-show').find('.content-wrapper, .portfolio-wrapper').hide();
Troubleshooting Jquery Show/Hide With Nested Divs

Troubleshooting Jquery Show/Hide With Nested Divs

By : StoneMason
Date : March 29 2020, 07:55 AM
wish helps you you can use fadeToggle():
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org