javascript - Change HTML element and restore -

I have a website with 2 links

Once the user clicks on a link, then It has to be an H2 title without a link.
When the user clicks on another link, the first link should be restored in its previous state and the second link should be an H2 element.

The purpose is to show a new tab in the link, so they do not reload the page.

HTML (Don 'link Href href)

  & lt; Div id = "panel" class = "header-panels" & gt; & Lt; A data-link = "# panel image" href = "... / images / #" tabindex = "0" square = "active" & gt; Photos & lt; / A & gt; & Lt; A data-link = "# panel video" href = "... / video / #" tabindex = "0" & ​​gt; Video & lt; / A & gt; & Lt; / Div & gt;  

What is the way to do this with javascript / jquery?

I have tried stuff:

  var p = $ ('.hair-panel.activ'); Var a = $ ('& lt; h2 & gt; & lt; / h2 & gt;'). Attachments (p.contents ()); P.replaceWith (a);  

And it works to change a tag in H2, but when the user clicks for the second time, I do not have to reproduce the tag with all the attributes.

Or does anyone know a better approach on this?

Thanks in advance?

var all_a = $ ('# panel') ; // cache your selector var h2 = $ ('& lt; h2 / & gt;') Attr ('id', 'temp'); // has created an H2 tag with a temporary template (to identify if it needs style) All_a.click (function (e) {e.preventDefault (); // Stop the default behavior of the click if you If all_a.show (); // want, show all tags inside the ID panel $ var = $ = (this); // cache selector h2.text ($ this.text ()). InsertBefore ($ this); // Enter h2 A click has been clicked before the current and it is clicked with a click to hide $ text.hide (); //);