Question

I’m having trouble grabbing the actual text within a header tag that is generated by some PHP code. Here’s the portion of the page that I’m grabbing.

<div class="container">
  <div class="majorContainer">
    <h2>Your results for: <small>"tables"</small></h2>
    <hr />
    <div class='accordionButton'>
      <h3 style="display:inline">1. </h3>
      <h3 style="display:inline" id='major-1'>Electrical Engineering Technology</h3>
      <p>...</p>
    </div>
    <div class='accordionButton'>
      <h3 style="display:inline">2. </h3>
      <h3 style="display:inline" id='major-2'>Retail Management</h3>
      <p>...</p>
    </div>

Basically, when the user clicks on an ‘accordionButton’, I want to pull the text from the header tag of that specific button. In my PHP, I assigned an ID to each header tag because I figured I could just pull the text doing:

document.getElementById(this.getElementsByTagName("h3")[0].id).text

When I alerted this in a message box, I’m only seeing ‘undefined’. I tried, instead, just doing…

$(this).text()

…but this returned “1. Electrical Engineering Technology…” which is not what I want. I just want the title “Electrical Engineering Technology” that is contained in the h3 tag.

What am I doing wrong? Thanks!

Answer 1

Would this help? I am using jquery 1.7.1.

$(".accordionButton").on("click", function(){
   alert($(this).find("h3").eq(1).text()); 
});

If you need to learn more about jquery, here is a very good link to start with http://tutsplus.com/course/30-days-to-learn-jquery/