CODEWITHSUNDEEP
jquery
Sebastiano
Sebastiano

Reputation: 3

Making the first table already visible when fading with jquery

I'm Sebastiano. I have an easy question similar to this topic:

"Fade out one table and replace with another using jquery?"

I've tried the code (the last one posted) and it works well, but i have some problems when i try to make the first table already visible when running the site: sometimes the first table remain visible and the others just appear beneath the first one.

Can someone help me with that? It will be great.

This is the code:

    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(function(){
            var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;

            $(".hnd").click(function(e){
                e.preventDefault();

                if(sliding == true) return;

                sliding = true;

                var tblId = $(this).attr("href");

                if(!current){
                    $(tblId).fadeIn(speed, function(){
                        current = tblId;
                        sliding = false;
                    });

                } else {
                    $(current).fadeOut(speed, function(){
                        $(tblId).fadeIn(speed, function(){
                            current = tblId;
                            sliding = false;
                        });
                    });
                }
            });
        });
    </script>

    <style type="text/css">
        .tbl{
            border: 1px solid;
        }
    </style>
</head>
<body>


<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>


<div id="table1" class="tbl">
    <table>
        <tr>
            <td>foo</td>
        </tr>
        <tr>
            <td>bar</td>
        </tr>
    </table>
</div>

<div id="table2" class="tbl">
    <table>
        <tr>
            <td>foo 2</td>
        </tr>
        <tr>
            <td>bar 2</td>
        </tr>
    </table>
</div>

<div id="table3" class="tbl">
    <table>
        <tr>
            <td>foo 3</td>
        </tr>
        <tr>
            <td>bar 3 </td>
        </tr>
    </table>
</div>

<div id="table4" class="tbl">
    <table>
        <tr>
            <td>foo 4</td>
        </tr>
        <tr>
            <td>bar 4</td>
        </tr>
    </table>
</div>

<div id="table5" class="tbl">
    <table>
        <tr>
            <td>foo 5</td>
        </tr>
        <tr>
            <td>bar 5</td>
        </tr>
    </table>
</div>

</body>
</html>

Upvotes: 0

Views: 241

Answers (4)

Samurai
Samurai

Reputation: 3729

The simpler solution would be to add this line before the click function

$('#table1').fadeIn(speed);

$(".hnd").click(function(e){
...

Upvotes: 0

Konsole
Konsole

Reputation: 3475

You can add a class to your first table.

<div id="table1" class="tbl first">

Set your var as

tbl = $(".tbl").not(':first').hide()

The use following query in your click event.

if( $(document).find('.first') ) $('.first').hide(); //if class first is found hide it

Upvotes: 0

DeweyOx
DeweyOx

Reputation: 719

Here's a fiddle http://jsfiddle.net/DMRyL/

@Shivam is correct in theory, but you need some extra code to make it work.

First set your var like this:

tbl = $(".tbl").not(':first').hide();

Then: 

if(!current)
{
    current =  $(".tbl:first");
}
$(current).fadeOut(speed, function(){
    $(tblId).fadeIn(speed, function(){
        current = tblId;
        sliding = false;
    });
});

Upvotes: 0

Shivam
Shivam

Reputation: 2248

$(".tbl").not(':first').hide();

Upvotes: 1

Related Questions