Fade Multipie Texts with Buttons Click

Question

I want to make a text box or an area on my website, and I have about 9 buttons on the page which I don't want to redirect to other pages and open on the same page and in the same Text Box or Area that I create.

So, if someone clicks on Button 1, then opens Text 1 and its picture(s) with fades in animation, and when clicks on Button 2, Text 1 Box fades out and Text 2 with picture(s) fades in and etc. How can I do this?

I have tried some codes like this

$('.one').hide();
$('.two').hide();
$('.three').hide();

$('.btn1').click(function () {
    $('.one').fadeIn();
});

$('.btn2').click(function () {
    $('.one').fadeOut();
    $('.two').fadeIn();

});

$('.btn3').click(function () {
    $('.two').fadeOut();
    $('.three').fadeIn();
});

Fiddle

but when clicking the buttons, the Buttons' position is not fixed and moves with the text animation.

Is there any way to do the same with other codes?

possible duplicate of [jQuery hide element while preserving its space in page layout](http://stackoverflow.com/questions/6393632/jquery-hide-element-while-preserving-its-space-in-page-layout) — ozil, May 12 '15 at 07:47

Tuhin · Accepted Answer · 2015-05-12T07:43:46.277

2

$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function () {
    $.when($('.btnall').fadeOut()).done(function(){
    $('.one').fadeIn();
   });
});

$('.btn2').click(function () {
    $.when($('.btnall').fadeOut()).done(function(){
         $('.two').fadeIn();
    });


});

$('.btn3').click(function () {
   $.when($('.btnall').fadeOut()).done(function(){
    $('.three').fadeIn();
   });
});

I think this is what you need. Updated Fiddle

edited May 12 '15 at 07:43

answered May 12 '15 at 07:40

Tuhin

3,335
2
16
27

Keep on clicking a button – Tushar May 12 '15 at 07:42
Please clarify .. what do you want to say.. I didn't get @Tushar – Tuhin May 12 '15 at 07:45
If flickers animation of the text, keep on clicking `button 1` – Tushar May 12 '15 at 07:46
Clicking on buttons still toggles text – Tushar May 12 '15 at 07:50
@EOF Not suitable if there are 100 elements – Tushar May 12 '15 at 08:12
But I have given the solution as per the requirements. 100 elements is not concerned here – Tuhin May 12 '15 at 09:10

score 1 · Answer 2 · answered May 12 '15 at 07:44

More scalable and dynamic solution:

$('button').on('click', function () {
    var targetEl = $(this).data('target');
    $.when($('.' + targetEl).siblings('input').fadeOut()).done(function () {
        $('.' + targetEl).fadeIn();
    });
});

HTML:

<input class="one" value="Text 1">
<input class="two" value="Text 2">
<input class="three" value="Text 3">
<br>
<button data-target="one" class="btn1">Button 1</button>
<br>
<button data-target="two" class="btn2">Button 2</button>
<br>
<button data-target="three" class="btn3">Button 3</button>

Demo: https://jsfiddle.net/tusharj/91jfvqwm/8/

score 0 · Answer 3 · answered May 12 '15 at 07:39

0

You can wait fadeOut to complete before fading in new text field. for example

$('.btn1').click(function () {
    $('.btnall').fadeOut('slow', function() {
    $('.one').fadeIn();
    });
});

answered May 12 '15 at 07:39

miltos

1,009
1
6
10

Fade Multipie Texts with Buttons Click

3 Answers3