jquery - how to get the html inside a div

Question

I have this html:

<div class="portlet-header">
    Company Information ... <button> some button here </button>
</div>
<div class="portlet-content">
    <div class="content_regular">
        <table style=" width:100%; height:100%;">
            ...content
        </table>
    </div>
</div>

how do i get the html after i click the button at the portlet-header part, in this case, the table tag?

I have this jquery code to get the text on the header: $(this).parent().text(); but got nowhere in trying to retrieve the html under the "content_regular" class as shown above.

Hope your wisdom can help me with this. i know this very easy to others but i am not familiar with jquery.

thanks

Answer 1

Use .next() to get from .portlet-header to .portlet-content then use .html() rather than .text() to get the content, like this:

$(".portlet-header").click(function() {
  var html = $(this).next(".portlet-content").html();
});

If there may be something between the divs, another element, etc, use .nextAll() instead, like this: .nextAll(".portlet-content:first")