CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-accordion
Anuya
Anuya

Reputation: 8350

How to get the value of selected item in jQuery accordion and display it?

I am using the jQuery Accordion with reference from here.

On clicking the items in my section (header), I want to display in the below format:

Section # -> item # in my label as text (like breadcrumb).

I tried to search about it, and I got a clue to use 

var active = $('.selector').accordion('option', 'active');

But I do not have idea oh how to use this. I am new to jQuery.

My code is below :

           $(function () {
                $("#accordion").accordion({
                    heightStyle: "content"
                });  
            }); 
        </script>  

                        <div id="accordion">
                            <h3>
                                Section 1</h3>
                            <div>
                                <asp:LinkButton ID="LinkButton1" runat="server">Item 1</asp:LinkButton> 
                                <br /><br />
                                <asp:LinkButton ID="LinkButton3" runat="server">Item 2</asp:LinkButton> 
                            </div>
                            <h3>
                                Section 2</h3>
                            <div>
                                 <asp:LinkButton ID="LinkButton2" runat="server">Item 3</asp:LinkButton> 
                                 <br /><br />
                                 <asp:LinkButton ID="LinkButton4" runat="server">Item 4</asp:LinkButton> 
                            </div> 
                        </div> 

<asp:Label runat="server" ID="lbl_selectedValue"  ></asp:Label>

Upvotes: 0

Views: 7030

Answers (2)

bipen
bipen

Reputation: 36531

here

$('.selector').accordion('option', 'active'); 
 --^^^^^^^^^---this is accordion selector.. in your case it is <div id="accordion"> so use #accordion.

use text() or html() to replace the active value in <label>

 $('#lbl_selectedValue').text();
 --^^^^^^^^^^^^^^^^^^^^--- label selector with id as lbl_selectedValue

try this

 $(function () {
    $("#accordion").accordion({
                heightStyle: "content"
    });  

    var activeAccordion=$( "#accordion" ).accordion( "option", "active" );
    $('#lbl_selectedValue').text($("#accordion h3").eq(activeAccordion).text()); //"OR $('#lbl_selectedValue').html(activeAccordion);

    $(".accordion-header").on("click", function() { 
         var activeClickAccordion=$( "#accordion" ).accordion( "option", "active" );
         $('#lbl_selectedValue').text($("#accordion h3").eq(activeClickAccordion).text());
    })
 });

updated

give your label a class and try it..

<asp:Label runat="server" ID="lbl_selectedValue"  class="lbl_selectedValue"></asp:Label>

and your selector.

$('.lbl_selectedValue').text($("#accordion h3").eq(activeAccordion).text());

Upvotes: 0

Vishwajeet
Vishwajeet

Reputation: 1683

Try the below code:-

$("#accordion").bind("click", function() {

    alert($("h3[aria-expanded='true']",this).text());

});

or

$("#accordion h3").bind("click", function() {

    alert($(this).text());

});

Upvotes: 2

Related Questions