logo
down
shadow

Toggling content div on one-page site with jQuery


Toggling content div on one-page site with jQuery

By : user2954964
Date : November 22 2020, 10:33 AM
I wish this help you I'm building a portfolio section on a website that will be limited to 4 items. Each item has an image and description that are visible, and a details section that's hidden by default. , You need to use a callback on the .fadeOut(), This is the syntax:
code :
$(divToHide).fadeOut(400, function() {
    $(divToShow).fadeIn();
});
var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); });
$(visibleDiv).stop().fadeOut(400, function() {
    $(divToShow).fadeIn();
});
$('.nav a').click(function(event) {
    var currentElement = $(event.currentTarget);
    var divToShow = $(currentElement).attr('id').replace('link', 'details');
    ....
});
$('.nav a').click(function(event) {
    var currentElement = $(event.currentTarget);
    var divToShow = $(currentElement).attr('id').replace('link', 'details');

    var visibleDiv = $('.nav ~ 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).stop().fadeOut(400, function() {
            $('#' + divToShow).fadeIn();
        });
    }
    else $('#' + divToShow).fadeIn(); // fade it in.
});


Share : facebook icon twitter icon
jQuery Ajax loading content from another page of the site

jQuery Ajax loading content from another page of the site


By : Hai Feng Ma
Date : March 29 2020, 07:55 AM
may help you . The problem with my Ajax call in IE was related to an open
. Somehow I didn't check my HTML structure at first. It's just another reason why HTML validation is important!
using jquery, ajax and php to laod content on your site without reloading the whole page

using jquery, ajax and php to laod content on your site without reloading the whole page


By : Utkarsh Jha
Date : March 29 2020, 07:55 AM
this one helps. See this fiddle for a jquery+css solution to your problem [NO PHP REQUIRED]: http://jsfiddle.net/bYNeg/
jQuery Accordion Tab - Link to site, not page content

jQuery Accordion Tab - Link to site, not page content


By : phantomkiller
Date : March 29 2020, 07:55 AM
jquery toggling all the content

jquery toggling all the content


By : Matt Inglis
Date : March 29 2020, 07:55 AM
it fixes the issue Hi I'm trying to toggle content sepratly. , Change this part of your code:
code :
$switch.toggleClick(function () {
    $('.description').animate({
        height: 40
    });
    $(this).prevAll('.description:first').animate({
        height: $dscr.data("realHeight")
    }, 600);
    $(this).html("-");

}, function () {
    $dscr.animate({
        height: initHeight
    }, 600);
    $switch.html("+");
});
Converting site from jQuery to React - toggling from component

Converting site from jQuery to React - toggling from component


By : Virus
Date : March 29 2020, 07:55 AM
Does that help Having components affect other components that aren't descendants of theirs is not easy in basic React and usually involves a common ancestor and a whole bunch of callbacks. I recently wrote an answer on a similar issue which might give you a few ideas on how to move forward with your app in React
If I were you, I would look into a Flux (or Flux-like) implementation, such as Redux, and have the NavItems dispatch actions into the store to toggle the visible state of the InfoItems who would in turn, use the store state to determine if they should be rendered or not (or perhaps InfoContainer would do this for all InfoItems).
Related Posts Related Posts :
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • Conditional parameters for AJAX function
  • Jquery add class to input checkbox field
  • Bootstrap countdown timer Jquery
  • Open the closest modal of jQuery clicked element
  • change background color of specific button on click
  • Can I create link as post to 3rd party site and open in new tab?
  • ID is 'undefined' using .each()
  • Using .each() for targeting each child differently in Jquery
  • How to return data from functions in function
  • Execute this jquery only when viewport is bigger than
  • Bootbox showing white box behind dialog
  • Toggle multiple classes with prevAll(), nextAll(), slice(), and duplicate classes... better way?
  • Show/hide list items and add more/less link
  • Going through all occurences of class on slider change
  • Call jQuery valid() without updating the screen
  • hide and show ActionLink and save data in database - MVC
  • Pass each object in JSON array to query
  • Foundation Equalizer is setting height to inherit?
  • carousel navigation each function
  • changing color of text color with input slider
  • jquery: filter using AND OR in selector
  • Call a function If any Item is chosen From select box , After Dom update
  • Target class within a jquery object
  • How to scroll a web page with fixed navigation bar just before arrive to a section or div?
  • How to add a class name to a specific selector
  • How to prevent background scrolling
  • How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?
  • How to pass products and quantities to ASP.NET MVC4 Web API from form submit
  • jQuery css3 attribute not working
  • WordPress One Page Style Menus Scrolling
  • jquery.unobtrusive-ajax.js is not capturing the Submit event
  • Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'
  • can't get correct checkbox value
  • jquery tooltipster plugin, hide all tips?
  • How to set 3 different colors at jQuery UI Slider
  • How to convert a string to html and add a event, descard after use?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org