Having trouble getting custom tabs in jQuery to function properly?

Question

Having trouble getting custom tabs in jQuery to function properly?

I am facing an issue with a simple script I have created. The script is supposed to display a specific div when a user clicks on a link, and hide all other divs in the container. However, when I click on the link, nothing gets hidden as expected. Even after checking in firebug, there are no reported errors. Here's the code snippet:

javascript:

$(document).ready(function()
{




var linksToInt = { 
    "#pple": 0,
    "#serv": 1,
    "#sol": 2
}

$("a.div-link").click(function(){displayDiv($(this).attr("href"));});

function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}

function on_btn_click(displayDiv){
    displayDiv != null ? null : this;

    switch(displayDiv){
        case 0:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 1:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 2: 
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
        case 3:
            function(){$("#content > div").hide(); $(displayDiv).show();};  
            break;
}

});

markup:

<HTML>
<HEAD>
  <TITLE>Test</TITLE>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="application.js"></script>
 </HEAD>
 <BODY>
        <div id="sideLinks">
        <ul id="tabAbout">
            <li><a href="#pple" class="div-link">People</a></li>
            <li><a href="#serv" class="div-link">Service</a></li>
            <li><a href="#sol" class="div-link">Solutions</a></li>
        </ul>   
    </div>

<div id="content">
<div class="tabContent" id="pple">
    <p>
        Content
    </p>    


</div>

<div class="tabContent" id="serv">

    <p>
        Content
    </p>    

</div>

<div class="tabContent" id="sol">   
    <p>
        Content
    </p>    
</div>          
</div>

</BODY>
</HTML>

Any assistance would be greatly appreciated.

jquery html tabs hide show

Answer 1

Answer №1

If you want to hide other divs without using the switch function, consider utilizing jQuery's .siblings function to select all elements except the desired one. I recently implemented something similar in my own project with success.

Here is the code snippet where I use .siblings:

$(this).siblings().removeClass('selected');
$(this).addClass('selected');

To toggle the displayed div based on user selection:

selection = $(this).attr("id");
$(this).addClass('selected');
$("div#"+selection).siblings().hide();
$("div#"+selection).show();

In my case, users click on a list item to choose an item, but the concept remains the same. I tweaked the second code snippet to align with your approach of using .siblings for hiding. Initially, I used a class selector to hide elements, but I see the benefit of switching to siblings now.

I hope this explanation proves helpful to you.

As an edit, here’s an adjusted version of the code matching yours...

    selection = $(this).attr("href");
    $(".tabContent").hide();
    $("div#"+selection).show();

You can incorporate this simple solution within your displayDiv function for managing showing and hiding of elements.

Answer 2

If you want to hide other divs without using the switch function, consider utilizing jQuery's .siblings function to select all elements except the desired one. I recently implemented something similar in my own project with success.

Here is the code snippet where I use .siblings:

$(this).siblings().removeClass('selected');
$(this).addClass('selected');

To toggle the displayed div based on user selection:

selection = $(this).attr("id");
$(this).addClass('selected');
$("div#"+selection).siblings().hide();
$("div#"+selection).show();

In my case, users click on a list item to choose an item, but the concept remains the same. I tweaked the second code snippet to align with your approach of using .siblings for hiding. Initially, I used a class selector to hide elements, but I see the benefit of switching to siblings now.

I hope this explanation proves helpful to you.

As an edit, here’s an adjusted version of the code matching yours...

    selection = $(this).attr("href");
    $(".tabContent").hide();
    $("div#"+selection).show();

You can incorporate this simple solution within your displayDiv function for managing showing and hiding of elements.

Answer 3

Answer №2

According to the advice from a fellow coder, it seems like you have a missing curly bracket on the last line.

In your on_btn_click function, it appears that your displayDiv is being assigned a number. Attempting to use a selector on a number will not work as expected, resulting in an empty return value. You should replace $(1) with "#pple". If you prefer to store it in a variable, ensure that it allows access to both the id and the selector.

Additionally, the code within your on_btn_click function seems to be ineffective. Instead of utilizing a separate function in each case block, consider incorporating your code inline. Your revised code should resemble this:

 $(document).ready(function() {
var linksToInt = { 
    "#pple": 0,
    "#serv": 1,
    "#sol": 2}


$("a.div-link").click(function(){displayDiv($(this).attr("href"));});



function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}



function on_btn_click(displayDiv){
    displayDiv != null ? null : this;

    switch(displayDiv){
        case 0:
            $("#content > div").hide(); 
            //displayDiv has a value of '0', so you can't do $(0), it won't return anything             
            $("#pple").show();  
            break;
        case 1:
            $("#content > div").hide();
            $("#serv").show();  
            break;
        case 2: 
            $("#content > div").hide();
            $("#sol").show();  
            break;
        case 3:
            $("#content > div").hide();
            $(displayDiv).show();  
            break;
    }
}});

Answer 4

According to the advice from a fellow coder, it seems like you have a missing curly bracket on the last line.

In your on_btn_click function, it appears that your displayDiv is being assigned a number. Attempting to use a selector on a number will not work as expected, resulting in an empty return value. You should replace $(1) with "#pple". If you prefer to store it in a variable, ensure that it allows access to both the id and the selector.

Additionally, the code within your on_btn_click function seems to be ineffective. Instead of utilizing a separate function in each case block, consider incorporating your code inline. Your revised code should resemble this:

 $(document).ready(function() {
var linksToInt = { 
    "#pple": 0,
    "#serv": 1,
    "#sol": 2}


$("a.div-link").click(function(){displayDiv($(this).attr("href"));});



function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}



function on_btn_click(displayDiv){
    displayDiv != null ? null : this;

    switch(displayDiv){
        case 0:
            $("#content > div").hide(); 
            //displayDiv has a value of '0', so you can't do $(0), it won't return anything             
            $("#pple").show();  
            break;
        case 1:
            $("#content > div").hide();
            $("#serv").show();  
            break;
        case 2: 
            $("#content > div").hide();
            $("#sol").show();  
            break;
        case 3:
            $("#content > div").hide();
            $(displayDiv).show();  
            break;
    }
}});

Answer 5

Answer №3

There seems to be a bracket missing on the final line. The correct format should be

}});

instead of

});

You might want to consider using the jQuery UI Tabs module found at http://jqueryui.com/demos/tabs/ instead of creating something from scratch. It offers extensive customization and is user-friendly.

Answer 6

There seems to be a bracket missing on the final line. The correct format should be

}});

instead of

});

You might want to consider using the jQuery UI Tabs module found at http://jqueryui.com/demos/tabs/ instead of creating something from scratch. It offers extensive customization and is user-friendly.

Having trouble getting custom tabs in jQuery to function properly?

Answer №1

Answer №2

Answer №3

Similar questions

Execute a JavaScript function on a Node server following a click event in an HTML document

Error 405 - Invalid request method

Determine if a specific date occurred at least one day ago using momentjs

What is the best way to create a keyup event for the entire document except for one specific element?

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

Using the URL parameter in a jQuery AJAX request

jquery logic for iterating through all elements in a select menu encountering issues

CSS: Obtain a button and align it to the "a" element

Retrieving Ajax Data Using C#

When using equal-width columns in Bootstrap, the columns will be stacked one on top of the other

What is the best way to adjust the height of my website to properly display on all screen sizes

Interacting with a PNG file using a border radius in Internet Explorer 9 is causing issues with its transparency

Is the "footer" div automatically nested within the "main" div if they are not nested in the code?

How to effectively execute AJAX requests on the server side using Node.js

Recurrence of solely the middle segment of the separator's background picture

Is there a way to eliminate the additional gap found at the bottom of a div element?

HTML numbered list - precise sequence

What is the best way to save a webpage when a user clicks a button before leaving the page with Javascript

The Python socket fails to receive a valid response after sending an HTTP 1.1 CONNECT request

Waiting for Asynchronous Response in Jquery with Ajax