CodePen

HTML

            
              <div class="container">
  <h1>Changing titles</h1>
  <div class="tabbertab" title="Original title">
    <div class="editorTitle">
      <h2>New title</h2>
      <p>Grab the text from the hidden H2 below and make this div's title equal to it.</p>
    </div>
  </div>
  <h2 id="grabThis">First title</h2>
  <div class="tabbertab" title="Original title">
    <div class="editorTitle">
      <h2>New title</h2>
      <p>Grab the text from the hidden H2 below and make this div's title equal to it.</p>
    </div>
  </div>
  <h2 id="grabThis">Second Title</h2>
</div>
            
          
!

CSS

            
              body {
			font-family: helvetica, arial, sans-serif;
			font-size: 12px;
			background-color: #eee;
			color:#383838;
}

.container {
  width:40%;
  margin:150px auto;
}

#grabThis {
  display:none;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.tabbertab').each(function() {
  var $this = $(this);
  var titleToAdd = $this.next('#grabThis').text();
  $this.attr('title', titleToAdd);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................