CODEWITHSUNDEEP
jqueryjquery-ui-accordion
Alex K.
Alex K.

Reputation: 727

jQuery: Accordion - Change header text but don't change icons

so I use the accordion that jQuery offers.
Inside the accordion, I put some input fields.
Lets say I have an accordion with 3 rows (which you can expand and close).
Now when someone inputs something wrong into one of the input fields, the header of the row shall change to something like "error in here!" or whatever.
jQuery makes these expandable rows with icons by putting a span into the h3.
It looks like this (I use just a selfmade example here to explain the syntax!!):

<h3 id='some_id'>
    <span style='color:#FF0000;'>HELLO!</span>
    HEY!
</h3>

Now when I want to change the header, using
$("h3[id='some_id']").html('HI THERE!');
or
$("h3[id='some_id']").text('HI THERE!');
won't work, as they also delete the span within the h3.
Is has to stay there to show the icons though!

I also tried
$("h3[id='some_id']").children().html('HI THERE!');
but that changes the span only....and I want the span to only NOT change.
How can I change the 'HEY!' into 'HI THERE!' only, not deleting the span?

I hope this isn't written to complicated, I don't know how to express myself any better.
Sorry ;-)

EDIT: here is a fiddle for example jsfiddle.net/aLWPJ

Upvotes: 0

Views: 2172

Answers (1)

htxryan
htxryan

Reputation: 2961

Try this:

$(document).ready(function() {
    $(".accordion").accordion({
        collapsible: true,
        heightStyle: "content",
        active: false,
    });

    var spanHTML = $("h3#ui-accordion-1-header-0 span").clone().wrap('<p>').parent().html();
    $("h3#ui-accordion-1-header-0").html(spanHTML+'HI THERE!');
});

Fiddle: http://jsfiddle.net/aLWPJ/1/

EDIT: Changed in response to comment (again).

Upvotes: 1

Related Questions