marklchaves/change-h4-to-h2-javascript.markdown

## change-h4-to-h2-javascript.markdown

      
    Raw
  

              change-h4-to-h2-javascript.markdown
            
          
    Change h4 to h2 (JavaScript)

Convert an Avada Tab Heading (H4) to an H2. Using the Avada Tab element page as an example.
https://avada.theme-fusion.com/design-elements/tabs-element/
A Pen by mark on CodePen.
License.
Tested on Avada 7.3 running with WordPress 5.8.
Run the live demo and check for code updates on CodePen.

  
## index.html
<body onload="changeTabHeadingToH2();">
  <section>
  <div class="nav">
    <ul class="nav-tabs nav-justified">
      <li class="active">
        <a
          class="tab-link"
          data-toggle="tab"
          id="fusion-tab-design"
          href="#tab-97b178df35e10486135"
          ><h4
            class="fusion-tab-heading fusion-responsive-typography-calculated"
            style="--fontSize:24; line-height: 1.3; --minFontSize:24;"
            data-fontsize="24"
            data-lineheight="31.2px"
          >
            <i
              class="fontawesome-icon fa-laptop fas"
              style="font-size:16px;"
            ></i
            >Design
          </h4></a
        >
      </li>
      <li>
        <a
          class="tab-link"
          data-toggle="tab"
          id="fusion-tab-animation"
          href="#tab-72a15a91d374a7b9b18"
          ><h4
            class="fusion-tab-heading fusion-responsive-typography-calculated"
            style="--fontSize:24; line-height: 1.3; --minFontSize:24;"
            data-fontsize="24"
            data-lineheight="31.2px"
          >
            <i
              class="fontawesome-icon fa-rocket fas"
              style="font-size:16px;"
            ></i
            >Animation
          </h4></a
        >
      </li>
      <li>
        <a
          class="tab-link"
          data-toggle="tab"
          id="fusion-tab-development"
          href="#tab-f1475b46fc2b9877203"
          ><h4
            class="fusion-tab-heading fusion-responsive-typography-calculated"
            style="--fontSize:24; line-height: 1.3; --minFontSize:24;"
            data-fontsize="24"
            data-lineheight="31.2px"
          >
            <i class="fontawesome-icon fa-code fas" style="font-size:16px;"></i
            >Development
          </h4></a
        >
      </li>
    </ul>
  </div>
  </section>
  <section>
    <h2>The Tab Headings Above Have Been Converted to H2s</h2>
    <h3>Element Attributes are Preserved</h3>
    <h4>H4s Like this One are Not Affected</h4>
    <p class="intro-text">Example Tabs are based on the first set of tabs on Avada's <a class="fancy-link" href="https://avada.theme-fusion.com/design-elements/tabs-element/" target="_blank" title="Visit Avada's Tab Element Page">Tab Element</a> page.</p>
    <hr>
    <h3>Source Code for Tab Headings</h3>
    <h4>Before</h4>
    <code>&lt;h4 class=&quot;fusion-tab-heading fusion-responsive-typography-calculated&quot; style=&quot;--fontSize:24; line-height: 1.3; --minFontSize:24;&quot; data-fontsize=&quot;24&quot; data-lineheight=&quot;31.2px&quot;&gt;&lt;i class=&quot;fontawesome-icon fa-laptop fas&quot; style=&quot;font-size:16px;&quot;&gt;&lt;/i&gt;Design&lt;/h4&gt;</code>
    <h4>After (attributes respected)</h4>
    <code>&lt;h2 class=&quot;fusion-tab-heading fusion-responsive-typography-calculated&quot; style=&quot;--fontSize:24; line-height: 1.3; --minFontSize:24;&quot; data-fontsize=&quot;24&quot; data-lineheight=&quot;31.2px&quot;&gt;
&lt;i class=&quot;fontawesome-icon fa-laptop fas&quot; style=&quot;font-size:16px;&quot;&gt;&lt;/i&gt;Design
&lt;/h2&gt;</code>
  </section>
</body>

## script.js
/**
 * Respect heading attributes.
 *
 * Called by main function changeTabHeadingToH2().
 */
function assignAttributes(oldElt, newElt) {
  let attrs = oldElt.attributes;
  [...attrs].map((attr) => {
    newElt.setAttribute(attr.name, attr.value);
  });
  return newElt; // The new element now has the old attributes.
} // assignAttributes()

/**
 * Main function.
 *
 * Called by body.onload() in the HTML page;
 */
function changeTabHeadingToH2() {
  // Get all the Fusion tab headings.
  let targetElt = document.querySelectorAll(".fusion-tab-heading");

  // Don't continue if no target classes were found.
  if (!targetElt.length) {
    return;
  }

  console.log("I found " + targetElt.length + " tab headings to convert.");

  // Convert all the tab headings.
  targetElt.forEach((targ) => {
    /**
     * 1. Create the replacement H2.
     * 2. Re-add all attributes from original heading.
     */
    let newHeading = document.createElement("h2");
    if (targ.hasAttributes()) {
      newHeading = assignAttributes(targ, newHeading);
    }

    // Assign the original inner HTML to the new heading.
    let oldHTML = targ.innerHTML;
    newHeading.innerHTML = oldHTML;

    // Make the swap.
    let parentElt = targ.parentNode;
    parentElt.replaceChild(newHeading, targ);
  });

  console.log('Done converting.');
} // changeTabHeadingToH2()

## style.css
body {
  background-color: lightgray;
  font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 {
  font-weight: normal;
  text-align: center;
}

i {
  margin-right: 0.75em;
}

.intro-text {
  font-size: 1.25rem;
  text-align: center;
}

a {
  text-decoration: none;
  color: #111111;
}

.nav {
  display: block;
  text-align: center;
}

.nav-tabs.nav-justified {
  width: 100%;
}

.nav-tabs {
  display: inline-block;
  vertical-align: middle;
  list-style: none outside none;
}

.nav-tabs:before {
  content: " ";
  display: table;
}

.nav-tabs.nav-justified > li {
  display: table-cell;
  width: 1%;
}

.nav-tabs li.active, .nav-tabs li.active a.tab-link:hover, .nav-tabs li.active a.tab-link:focus {
  background-color: white;
}

.fancy-link {
  border-bottom: 3px solid firebrick;
}

.fancy-link:hover {
  border: 3px solid orange;
}

code {
  display: block;
  width: 80%;
  margin: 1em auto;
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet" />
	<body onload="changeTabHeadingToH2();">
	<section>
	<div class="nav">
	<ul class="nav-tabs nav-justified">
	<li class="active">
	<a
	class="tab-link"
	data-toggle="tab"
	id="fusion-tab-design"
	href="#tab-97b178df35e10486135"
	><h4
	class="fusion-tab-heading fusion-responsive-typography-calculated"
	style="--fontSize:24; line-height: 1.3; --minFontSize:24;"
	data-fontsize="24"
	data-lineheight="31.2px"
	>
	<i
	class="fontawesome-icon fa-laptop fas"
	style="font-size:16px;"
	></i
	>Design
	</h4></a
	>
	</li>
	<li>
	<a
	class="tab-link"
	data-toggle="tab"
	id="fusion-tab-animation"
	href="#tab-72a15a91d374a7b9b18"
	><h4
	class="fusion-tab-heading fusion-responsive-typography-calculated"
	style="--fontSize:24; line-height: 1.3; --minFontSize:24;"
	data-fontsize="24"
	data-lineheight="31.2px"
	>
	<i
	class="fontawesome-icon fa-rocket fas"
	style="font-size:16px;"
	></i
	>Animation
	</h4></a
	>
	</li>
	<li>
	<a
	class="tab-link"
	data-toggle="tab"
	id="fusion-tab-development"
	href="#tab-f1475b46fc2b9877203"
	><h4
	class="fusion-tab-heading fusion-responsive-typography-calculated"
	style="--fontSize:24; line-height: 1.3; --minFontSize:24;"
	data-fontsize="24"
	data-lineheight="31.2px"
	>
	<i class="fontawesome-icon fa-code fas" style="font-size:16px;"></i
	>Development
	</h4></a
	>
	</li>
	</ul>
	</div>
	</section>
	<section>
	<h2>The Tab Headings Above Have Been Converted to H2s</h2>
	<h3>Element Attributes are Preserved</h3>
	<h4>H4s Like this One are Not Affected</h4>
	<p class="intro-text">Example Tabs are based on the first set of tabs on Avada's <a class="fancy-link" href="https://avada.theme-fusion.com/design-elements/tabs-element/" target="_blank" title="Visit Avada's Tab Element Page">Tab Element</a> page.</p>
	<hr>
	<h3>Source Code for Tab Headings</h3>
	<h4>Before</h4>
	<code><h4 class="fusion-tab-heading fusion-responsive-typography-calculated" style="--fontSize:24; line-height: 1.3; --minFontSize:24;" data-fontsize="24" data-lineheight="31.2px"><i class="fontawesome-icon fa-laptop fas" style="font-size:16px;"></i>Design</h4></code>
	<h4>After (attributes respected)</h4>
	<code><h2 class="fusion-tab-heading fusion-responsive-typography-calculated" style="--fontSize:24; line-height: 1.3; --minFontSize:24;" data-fontsize="24" data-lineheight="31.2px">
	<i class="fontawesome-icon fa-laptop fas" style="font-size:16px;"></i>Design
	</h2></code>
	</section>
	</body>
	/**
	* Respect heading attributes.
	*
	* Called by main function changeTabHeadingToH2().
	*/
	function assignAttributes(oldElt, newElt) {
	let attrs = oldElt.attributes;
	[...attrs].map((attr) => {
	newElt.setAttribute(attr.name, attr.value);
	});
	return newElt; // The new element now has the old attributes.
	} // assignAttributes()

	/**
	* Main function.
	*
	* Called by body.onload() in the HTML page;
	*/
	function changeTabHeadingToH2() {
	// Get all the Fusion tab headings.
	let targetElt = document.querySelectorAll(".fusion-tab-heading");

	// Don't continue if no target classes were found.
	if (!targetElt.length) {
	return;
	}

	console.log("I found " + targetElt.length + " tab headings to convert.");

	// Convert all the tab headings.
	targetElt.forEach((targ) => {
	/**
	* 1. Create the replacement H2.
	* 2. Re-add all attributes from original heading.
	*/
	let newHeading = document.createElement("h2");
	if (targ.hasAttributes()) {
	newHeading = assignAttributes(targ, newHeading);
	}

	// Assign the original inner HTML to the new heading.
	let oldHTML = targ.innerHTML;
	newHeading.innerHTML = oldHTML;

	// Make the swap.
	let parentElt = targ.parentNode;
	parentElt.replaceChild(newHeading, targ);
	});

	console.log('Done converting.');
	} // changeTabHeadingToH2()
	body {
	background-color: lightgray;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1, h2, h3, h4 {
	font-weight: normal;
	text-align: center;
	}

	i {
	margin-right: 0.75em;
	}

	.intro-text {
	font-size: 1.25rem;
	text-align: center;
	}

	a {
	text-decoration: none;
	color: #111111;
	}

	.nav {
	display: block;
	text-align: center;
	}

	.nav-tabs.nav-justified {
	width: 100%;
	}

	.nav-tabs {
	display: inline-block;
	vertical-align: middle;
	list-style: none outside none;
	}

	.nav-tabs:before {
	content: " ";
	display: table;
	}

	.nav-tabs.nav-justified > li {
	display: table-cell;
	width: 1%;
	}

	.nav-tabs li.active, .nav-tabs li.active a.tab-link:hover, .nav-tabs li.active a.tab-link:focus {
	background-color: white;
	}

	.fancy-link {
	border-bottom: 3px solid firebrick;
	}

	.fancy-link:hover {
	border: 3px solid orange;
	}

	code {
	display: block;
	width: 80%;
	margin: 1em auto;
	}