CODEWITHSUNDEEP
jqueryhtmlcss
Jakub Sůva
Jakub Sůva

Reputation: 3

Switch classes without losing content

I have div#container, which contains two divs div.current-content and div.next-content.
Both are filled with some content.
How I can switch class between next and current content without losing data?

This is my original reason, but with this I lost everything in current-content. 

changeContent = function (direction, toLoad) {

    if (direction == 'next') {
        container.append('<div class="next-content"></div>');
        toScroll = -contentWidth;
    } else {
        container.prepend('<div class="next-content"></div>').css('margin-left', -contentWidth);
        toScroll = 0;
    }

    container.css('width', contentWidth * 2);
    $('.current-content, .next-content').css('width', contentWidth);
    $('.next-content').load(toLoad, '', function () {

        // PSEUDO 3D                
        if (direction == 'next') {
            $('.next-content .content')
                .css('margin-left', contentWidth * 2)
                .animate({
                'margin-left': (contentWidth / 2) - 485
            }, {
                duration: speed,
                easing: 'easeInOutQuad',
                complete: function () {
                    $('.content').css('margin-left', 'auto');
                }
            });
            $('.current-content .content')
                .css('margin-left', (contentWidth / 2) - 485)
                .animate({
                'margin-left': -contentWidth
            }, {
                duration: speed,
                easing: 'easeInOutQuad'
            });
        } else {
            $('.next-content .content')
                .css('margin-left', -contentWidth * 2)
                .animate({
                'margin-left': (contentWidth / 2) - 485
            }, {
                duration: speed,
                easing: 'easeInOutQuad',
                complete: function () {
                    $('.content').css('margin-left', 'auto');
                }
            });

            $('.current-content .content')
                .css('margin-left', (contentWidth / 2) - 485)
                .animate({
                'margin-left': contentWidth * 2
            }, {
                duration: speed,
                easing: 'easeInOutQuad'
            });
        }
        container.animate({
            'margin-left': toScroll
        }, {
            duration: speed,
            easing: 'easeInOutQuad',
            complete: function () {

                container.css({
                    'margin-left': 0,
                        'width': 'auto'
                });
                $('.current-content').remove();
                $('.next-content').addClass('current-content').removeClass('next-content');
                $('.current-content').css('width', '100%');
            }
        });
    }

Upvotes: 0

Views: 69

Answers (1)

Marko Gresak
Marko Gresak

Reputation: 8207

At the end of your changeContent function, you're calling:

$('.current-content').remove();

This removes element(s) with class .current-content. Instead of this, you should hide it, either using css or javascript/jquery.

Using css:

  • It would be best to assign a new class, for example .prev-content
  • In your css file, add display: none or visibility:hidden

Using jQuery:

  • I would still recommend assigning a new class as at css
  • Select element and hide it using $("{selector}").hide()

And if you want to show it back, you can remove .prev-content class and add .current-content back, or just select it using jQuery and un-hide it, using $("{selector}").show().

{selector} stands for a selector that selects only the element you want to hide/show

Upvotes: 2

Related Questions