unselect selected tab on click

[Steve]

is there a built in way to unselect the selected tab when selected tab is clicked again? client side...

[Mr. Plinko]

What kind of functionality are you looking for?

i.e. are you looking to no longer display a multipage?

[Steve]

sort of... I'm not using a multipage, I wanted to animate the display of tab related content, and I didn't want it (the tab related content) to take up space in the page, so I'm using divs instead of a multipage so this is more like a toolbar, or something like that anyway.

I want to show tab content when tab is clicked first time, but if same tab is re-clicked after selected, I want to hide the content again.

So, I'm using the tab selected, and unselected events to show and hide appropriate related div, but don't have a good idea on how to hide related tab content when tab is clicked again, after it is selected.

so, if you have a suggestion on a better control to use to open and close content on click, I would certainly be open to that, but I tried to use rad splitter and sliding panels, didn't like that due to extra bar showing up under tabs, and the docking didn't work like I expected. Tried radtoolbar, but wasn't able to get my content to display properly in place of a contained button using a template.

but, if I hook up a click handler to the tab, the tab closes, and then re-opens or re-selects itself, I want to have it select on first click, and unselect on another click if the tab clicked is already selected...

 

function rcbRadTabStrip1_OnClientTabSelected(sender, args) {
    var tab = args.get_tab();
    var pageId = tab.get_text();
    $("div[id$=" + pageId + "PageView]:first").slideDown();
    return false;
}

function rcbRadTabStrip1_OnClientTabUnSelected(sender, args) {
    var tab = args.get_tab();
    var pageId = tab.get_text();
    $("div[id$=" + pageId + "PageView]:first").slideUp("fast");
    return false;
}

<div id="rcb">
 <telerik:RadTabStrip ID="RadTabStrip1" AutoPostBack="false" OnClientTabSelected="rcbRadTabStrip1_OnClientTabSelected" OnClientTabUnSelected="rcbRadTabStrip1_OnClientTabUnSelected" Skin="Black" runat="server">
  <Tabs>
   <telerik:RadTab ID="MeasureTab" Text="Measures" runat="server"></telerik:RadTab>
   <telerik:RadTab ID="SlicerTab" Text="Slicers" runat="server"></telerik:RadTab>
   <telerik:RadTab ID="SortTab" Text="Sort" runat="server"></telerik:RadTab>
   <telerik:RadTab ID="FilterTab" Text="Filter" runat="server"></telerik:RadTab>
  </Tabs>
</telerik:RadTabStrip>
<div class="pageViewWrapper">
 <div id="MeasuresPageView" class="pageView" style="display: none;" runat="server">
  Measures content...
 </div>
 <div ID="SlicersPageView" class="pageView" style="display: none;" runat="server">
  Slicers content...
 </div>
 <div ID="SortPageView" class="pageView" style="display: none;" runat="server">
  Sort content...
 </div>
 <div ID="FilterPageView" class="pageView" style="display: none;" runat="server">
  Filter content...
 </div>
</div>
</div>

[Paul]

Hi Steve,

Here's a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <script type="text/javascript">
        function OnClientTabSelecting(sender, eventArgs) {
            var tab = eventArgs.get_tab();
            if (tab.get_selected() == true) {
                tab.set_selected(false);
                eventArgs.set_cancel(true);
            }
        }
    </script>

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnClientTabSelecting="OnClientTabSelecting"
        ClickSelectedTab="true">
        <Tabs>
            <telerik:RadTab runat="server" Text="Root RadTab1">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab2">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab3">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    </form>

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Steve]

works perfectly, thank you.