CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netcss
Ronan
Ronan

Reputation: 327

Making accordions with tabs in asp.net using jquery

Im making accordion tabs using jquery in visual studio and the panes don't expand or collapse at the moment. I'm getting this error Uncaught TypeError: Object [object Object] has no method 'tabs' Here is my html

<section id="Popularquestions">
            <h4>Popular Questions</h4>
        <h5 class="current">1.What are the most common camera ports?</h5>
        <div class="pane"><p><a href="Knowledgebase/commonports.aspx">Here</a> is a table of the most common camera ports available</p></div>
        <h5>2.Where can I see a list of vendors and their MAC addresses?</h5>
        <div class="pane"><p></p></div>
        <h5>3.Where can I see a list of makes and models?</h5>
        <div class="pane"><p></p></div>
        <h5>4.Where can I see a list of usernames and passwords?</h5>
        <div class="pane"><p></p></div>
        <h5>5.Where can I see a list of available apps?</h5>
        <div class="pane"><p></p></div>

jquery

<script src="assets/jquery.js"></script>
    <script>
        $("#accordion").tabs(
    "#accordion div.pane",
    { tabs: 'h2', effect: 'slide', initialIndex: null }
  );
    </script>

And css

#accordion {
    background:#333 url(/media/img/gradient/h300.png) 0 0;
    width: 300px;
    border:1px solid #333;
    -background:#666;
    margin: 0 auto;
}

/* accordion header */
#accordion h2 {
    background:#ccc url(/media/img/gradient/h30.png);
    line-height: 14px;
    margin:0;
    padding:5px 15px;
    font-size:14px;
    font-weight:normal;
    border:1px solid #fff;
    border-bottom:1px solid #ddd;
    cursor:pointer;
}

/* currently active header */
#accordion h2.current {
    cursor:default;
    background-color:#fff;
}

/* accordion pane */
#accordion .pane {
    border:1px solid #fff;
    border-width:0 2px;
    display:none;
    height:180px;
    padding:15px;
    color:#fff;
    font-size:12px;
}

/* a title inside pane */
#accordion .pane h3 {
    font-weight:normal;
    margin:0;
    font-size:16px;
    color:#999;
}

Upvotes: 1

Views: 647

Answers (1)

Sandcar
Sandcar

Reputation: 892

try like this:

 <script>
$(function() {

 $("#accordion").tabs(
    "#accordion div.pane",
    { tabs: 'h2', effect: 'slide', initialIndex: null }

});
</script>

Upvotes: 1

Related Questions