Question

So, I’m using jQuery UI (with tabs) to be able to tab some content on my page. However, there is an wierd issue going on.

I have two tabs, “KR” and “O” – When i click on the “O” tab, i do get the correct content. How ever, if i click on the “KR” tab, i get both KR and O? Check the images below for review.

Here is the PHP/HTML Code,

                    <div id="right_side_menu">

                <div id="sub_menu">
                    <ul>
                        <?php if($money_type == TRUE) : ?><li><a href="#tab-coins"><span>Kr</span></a></li> <?php endif ?>
                        <?php if($tasks_type == TRUE) : ?> <li><a href="#tab-hours"><span>O</span></a></li> <?php endif ?>
                        <?php if($hours_type == TRUE) : ?> <li><a href="#tab-tasks"><span>T</span></a></li> <?php endif ?>
                    </ul>
                </div> <!-- end sub_menu -->

                <div class="clear"></div>

                <br />

                <div id="statistics">

                    <?php if($money_type == TRUE) : ?>

                        <div id="tab-coins">
                            <ul>
                                <li><span id="statistics_big"> <?php if($total_year_money == FALSE) { echo '0'; } else { echo $total_year_money; } ?> </span><br><span class="statistics_underline">Kroner totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> <?php if($total_month_money == FALSE) { echo '0'; } else { echo $total_month_money; } ?> </span><br><span class="statistics_underline">Kroner denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> <?php if($total_highest_money == FALSE) { echo '0'; } else { echo $total_highest_money; } ?> </span><br><span class="statistics_underline">Høyest salg denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->

                    <?php endif ?>

                    <?php if($hours_type == TRUE) : ?> 

                        <div id="tab-hours">
                            <ul>
                                <li><span id="statistics_big"> <?php if($total_year_hours == FALSE) { echo '0'; } else { echo $total_year_hours; } ?> </span><br><span class="statistics_underline">Timer totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> <?php if($total_month_hours == FALSE) { echo '0'; } else { echo $total_month_hours; } ?> </span><br><span class="statistics_underline">Timer denne måned</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> <?php if($total_highest_hours == FALSE) { echo '0'; } else { echo $total_highest_hours; } ?> </span><br><span class="statistics_underline">Høyest antall timer denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->

                    <?php endif ?>

                    <?php if($tasks_type == TRUE) : ?>

                        <div id="tab-tasks">
                            <ul>
                                <li><span id="statistics_big"> <?php if($total_year_tasks == FALSE) { echo '0'; } else { echo $total_year_tasks; } ?> </span><br><span class="statistics_underline">Arbeidsoppgaver totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> <?php if($total_month_tasks == FALSE) { echo '0'; } else { echo $total_month_tasks; } ?> </span><br><span class="statistics_underline">Arbeidsoppgaver denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> <?php if($total_highest_tasks == FALSE) { echo '0'; } else { echo $total_highest_tasks; } ?> </span><br><span class="statistics_underline">Høyest arbeidsoppgaver denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->

                    <?php endif ?>

                    <div class="clear"></div>

                </div>

            </div> <!-- end right side menu -->

And this is the live output,

<div id="right_side_menu">

                <div id="sub_menu">
                    <ul>
                        <li><a href="#tab-coins"><span>Kr</span></a></li>                            <li><a href="#tab-hours"><span>O</span></a></li>                                                   </ul>
                </div> <!-- end sub_menu -->

                <div class="clear"></div>

                <br />

                <div id="statistics">


                        <div id="tab-coins">
                            <ul>
                                <li><span id="statistics_big"> 0 </span><br><span class="statistics_underline">Kroner totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> 0 </span><br><span class="statistics_underline">Kroner denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> 0 </span><br><span class="statistics_underline">Høyest salg denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->




                        <div id="tab-tasks">
                            <ul>
                                <li><span id="statistics_big"> 0 </span><br><span class="statistics_underline">Arbeidsoppgaver totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> 0 </span><br><span class="statistics_underline">Arbeidsoppgaver denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> 0 </span><br><span class="statistics_underline">Høyest arbeidsoppgaver denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->


                    <div class="clear"></div>

                </div>

            </div> <!-- end right side menu -->

Javscript i use,

<script>
$(function() {
    $( "#right_side_menu" ).tabs();
});

</script>

Answer 1

i figured out.. you have a wrong tab id selector there

<li><a href="#tab-hours"><span>O</span></a>
            // -----^----- //here

you don’t have a <div> with id = “tab-hours” .. (however i am stilll wondering how was the tab able to show you the other tab-tasks even though the id was wrong..)

anyways it should be

<li><a href="#tab-tasks"><span>O</span></a>
             --^-- here

and this is working

working fiddle