Question

I am using Jquery Accordian in my page, Here is the HTML,

<div class="forms-cont">
    <h5>
        Accordian Examples</h5>
    <div class="accordian">
        <div>
            <h2 class="sch-hdr">
                Header One</h2>
            <div class="sch-cont levelOne">
                <p>
                    this is a title text - level one</p>
            </div>
        </div>
        <div class="">
            <h2 class="sch-hdr">
                Header Two</h2>
            <div class="sch-cont levelOne">
                <p>
                    This is another title text - level one
                </p>
                <div class="martop10">
                    <h3 class="subgr-hdr">
                        Staff</h3>
                    <div class="sch-cont levelTwo">
                        <p>
                            This is an inner text
                        </p>
                    </div>
                </div>
                <div class="">
                    <h3 class="subgr-hdr">
                        Manager</h3>
                    <div class="sch-cont levelTwo">
                        <p>
                            This is an inner text
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

In this, i need to append an anchor tag for the accordian to work, and here is my jquery,

 $(document).ready(function() { 

    // Accordian Main 
    $('.accordion h2, .accordion h3').addClass('closed'); 
    $('.levelOne,.levelTwo').hide(); 
    $('.accordion h2, .accordion h3').each(function () { 
            $(this).html(function() { 
            var headertext = '<a href="#">' + $(this).html() + '</a>'; 
            return headertext; 
        }); 
    }); 

    // Level 1 Accordian 
    $(".accordion h2 a").click(function() { 
        alert('hi');
            $(this).next(".levelOne").slideToggle("slow"); 
            $(this).toggleClass("closed"); 
            return false; 
    }); 
    // Level 2 Accordian 
    $('.accordion h3 a').click(function() { 
            $(this).parent().next(".levelTwo").slideToggle("slow"); 
            $(this).parent().toggleClass("closed"); 
            return false; 
    }); 
  });

But i am unable to append anchor in H2 and H3. Any help?

Answer 1

EDIT: Sorry, is wrapInner() instead if wrap().

Three things:

1) You don’t need an .each(), simply:

$('.accordion h2, .accordion h3').wrapInner('<a href="#"></a>');

2) There is a typo in your html:

<div class="accordian">  <-- accordion?

3) A “parent()” is missing on the “h2 a” click event:

$(".accordion h2 a").click(function() { 
        $(this).next(".levelOne").slideToggle("slow"); <-- actual

$(".accordion h2 a").click(function() { 
        $(this).parent().next(".levelOne").slideToggle("slow"); <-- with parent()

And then it will work 🙂

jsFiddle: http://jsfiddle.net/fy2uM/2