Question

how can i open and close Jquery UI Accordian widget with external control (button/anchor).

Answer 1

I figured it out by myself, as shown below.
Suppose this is your jquery UI according consisting of four accordians.

        <div id="accordion" class="accordion">
        <div>
            <h3><a href="#">First</a></h3>
            <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        </div>

        <div>
            <h3><a href="#">Second</a></h3>
            <div>Phasellus mattis tincidunt nibh.</div>
        </div>

        <div>
            <h3><a href="#">Third</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>

       <div>
            <h3><a href="#">Fourth</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>


    </div>

Now add external anchors with their different ID’s

    <!-- Enternal Anchor Mossawir -->
    <div>
     <a href="#" id="openfirst">Open 1st</a>
     <a href="#" id="opensecond">Open 2nd</a>
    <a href="#" id="openthird">Open 3rd</a>
    <a href="#" id="openfourth">Open 4th</a>
    </div>

Now add jquery code.

         $(function(){

         $("#accordion").accordion({ header: "h3" });


        //this will open 1st accordian.
        $('#openfirst').click(function(){
                  $(".accordion").accordion({active:0});
            });

        //this will open 2nd accordian.
         $('#opensecond').click(function(){
                  $(".accordion").accordion({active:1});
            });

        //this will open 3rd accordian.
            $('#openthird').click(function(){
                  $(".accordion").accordion({active:2});
            });


        //this will open 4th accordian.
       $('#openfourth').click(function(){
                  $(".accordion").accordion({active:3});
            });

        });

To add more accordions and anchor, simply add an new id to anchor and in jquery code will give its active parameter. active:0 means 1st accordion, active:1 means the second accordian and so on. this works for Jquery UI accordion.
Here is an example: http://jsfiddle.net/ZRBc6/1/