Home/ Questions/Q 8134703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T10:07:46+00:00

where I am using Jquery UI. I have an accordion menu, which has multiple

  • 0

where I am using Jquery UI. I have an accordion menu, which has multiple hyperlinks in each accordion menu.

What I am trying to do, is when I click on one of these hyperlinks, I want it to open the page I am calling, that is to be displayed within a new tab that can be closed with an x (like these simple manipulation ones), but in a new tab to be displayed.

My aim is that I can have mupliple tabs open that have been launched by selecting differet hyperlink options within the accordion, so the user closes them when they want to.

I have not found anything on how to do this.

Can someone please help.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hi I think I have worked it out. Thanks for responding @johnrobinson

    I did this with a button, but will do what I need.

            <!DOCTYPE html>
        <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>jQuery UI Example Page</title>
                <link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
                <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
                <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
                <script type="text/javascript" src="js/jquery.callapse.js"></script>
            <meta charset="utf-8">
            <style>
            #dialog label, #dialog input { display:block; }
            #dialog label { margin-top: 0.5em; }
            #dialog input, #dialog textarea { width: 95%; }
            #tabs { margin-top: 1em; }
            #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
            #add_tab { cursor: pointer; }
            </style>
            <script>
            $(function() {
                var $tab_title_input = $( "#tab_title"),
                    $tab_content_input = $( "#tab_content" );
                var tab_counter = 2;

                // tabs init with a custom tab template and an "add" callback filling in the content
                var $tabs = $( "#tabs").tabs({
                    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
                    add: function( event, ui ) {
                        var tab_content = "andyContent" || "Tab " + tab_counter + " content.";
                        $( ui.panel ).append( "<p>" + tab_content + "</p>" );
                    }
                });

                // modal dialog init: custom buttons and a "close" callback reseting the form inside
                var $dialog = $( "#dialog" ).dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        Add: function() {
                            addTab();
                            $( this ).dialog( "close" );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    open: function() {
                        $tab_title_input.focus();
                    },
                    close: function() {
                        $form[ 0 ].reset();
                    }
                });

                // actual addTab function: adds new tab using the title input from the form above
                function addTab() {
                    var tab_title = "andytitle" || "Tab " + tab_counter;
                    $tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
                    tab_counter++;
                }

                // addTab button: just opens the dialog
                $( "#add_tab" )
                    .button()
                    .click(function() {
                    addTab();

                    });

                // close icon: removing the tab on click
                // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
                $( "#tabs span.ui-icon-close" ).live( "click", function() {
                    var index = $( "li", $tabs ).index( $( this ).parent() );
                    if(index != 0){
                                $tabs.tabs( "remove", index );
                    }

                });
            });
            </script>
        </head>
        <body>
            <div class="demo">
                <button id="add_tab">Add Tab</button>
                    <div id="tabs">
                        <ul>
                            <li><a href="#tabs-1">Nunc tincidunt</a> </li>
                        </ul>
                    <div id="tabs-1">
                        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                    </div>
            </div>
        </body>
        </html>

        </div>
    • 0