CODEWITHSUNDEEP
jquery
steeve
steeve

Reputation: 699

Appending <a> using Jquery

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?

Upvotes: 0

Views: 176

Answers (3)

Marcelo De Zen
Marcelo De Zen

Reputation: 9497

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

Upvotes: 1

CraftyFella
CraftyFella

Reputation: 7568

Looks like you spelt accordion wrong:

change it to:

$('.accordian h2, .accordian h3').each(function () { 
            $(this).html(function() { 
            var headertext = '<a href="#">' + $(this).html() + '</a>'; 
            return headertext; 
        }); 
    });

See js fiddle here http://jsfiddle.net/HukJE/4

Upvotes: 1

user657496
user657496

Reputation:

In this part of your code, this refers to the function itself instead of the object:

$('.accordion h2, .accordion h3').each(function () { 
        $(this).html(function() { 
        var headertext = '<a href="#">' + $(this).html() + '</a>';   // <-- HERE
        return headertext; 
    }); 
});

se this instead:

$('.accordion h2, .accordion h3').each(function () { 
        var that = this;
        $(this).html(function() { 
        var headertext = '<a href="#">' + $(that).html() + '</a>'; 
        return headertext; 
    }); 
});

Here's a JSFIDDLE demonstrating it

Upvotes: 2

Related Questions