jQuery - wrap all elements between two elements

DeanH
July 22, 2024
86 views
3 votes
3 Answers

I’m trying to wrap all of the elements between two headings regardless of what they are without having to add classes. Example:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>   

<script>
$(document).ready(function () {
$(".axxs-accordion > :header").addClass("h-trigger static").next().wrap("<div class='section collapsed'></div>");
}); 
</script>

<div class="axxs-accordion">
  <h2>Section with a Paragraph</h2>
  <!-- wrap here -->
    <p>Here is some text content</p>
  <!-- to here -->
  <h2>Section with a Div and Mixed Content</h2>
  <!-- wrap here -->
    <h3>Heading</h3>
    <p>Here is some content with text and a link.</p>
    <p><a href="#" target="_blank">Test link</a></p>
  <!-- to here -->
  <h2>Section with a List</h2>
  <!-- wrap here -->
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
  <!-- to here -->
</div>

Obviously it works in the first and third sections, because there is only one element after the H2. But how do I wrap the group of elements in the second section? I’ve seen other posts about nextUntil, but those all of those examples had classes to work off of.

Tags: jquery

Answers

Actually, you do not need the class on h2 element:

$(document).ready(function() {
  $('.axxs-accordion h2').each(function() {
    var $h2 = $(this);
    var $content = $h2.nextUntil('h2');
    $content.wrapAll('<div class="section-content"></div>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="axxs-accordion">
  <h2>Section with a Paragraph</h2>
  <!-- wrap here -->
  <p>Here is some text content</p>
  <!-- to here -->

  <h2>Section with a Div and Mixed Content</h2>
  <!-- wrap here -->
  <h3>Heading</h3>
  <p>Here is some content with text and a link.</p>
  <p><a href="#" target="_blank">Test link</a></p>
  <!-- to here -->

  <h2>Section with a List</h2>
  <!-- wrap here -->
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
  <!-- to here -->
</div>

To wrap all elements between two header elements with jQuery, you can use the following script. This will ensure that all elements between the headers are wrapped in a <div> with the class section collapsed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wrap Elements</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".axxs-accordion h2").each(function () {
        var $this = $(this);
        $this.nextUntil("h2").wrapAll("<div class='section collapsed'></div>");
      });
    });
  </script>
</head>
<body>
  <div class="axxs-accordion">
    <h2>Section with a Paragraph</h2>
    <!-- wrap here -->
      <p>Here is some text content</p>
    <!-- to here -->
    <h2>Section with a Div and Mixed Content</h2>
    <!-- wrap here -->
      <h3>Heading</h3>
      <p>Here is some content with text and a link.</p>
      <p><a href="#" target="_blank">Test link</a></p>
    <!-- to here -->
    <h2>Section with a List</h2>
    <!-- wrap here -->
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
    <!-- to here -->
  </div>
</body>
</html>

Explanation

HTML: Contains the structure with headers and content that needs to be wrapped.
jQuery: Iterates over each h2 header and wraps all elements between this header and the next h2 header in a <div> with the class section collapsed.

This script dynamically wraps all content between headers as specified.

Here’s an enhanced version with JavaScript to handle collapsing and expanding sections and CSS for styling:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

.axxs-accordion h2 {
  cursor: pointer;
  background-color: #007bff;
  color: white;
  padding: 10px;
  margin: 0;
  border-radius: 5px;
}

.section {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.section.collapsed {
  max-height: 0;
  padding: 0;
  border: 0;
}

.section:not(.collapsed) {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  max-height: 1000px; /* Adjust based on content */
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wrap Elements with Collapse</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".axxs-accordion h2").each(function () {
        var $this = $(this);
        $this.nextUntil("h2").wrapAll("<div class='section collapsed'></div>");
      });

      $(".axxs-accordion h2").click(function () {
        var $this = $(this);
        $this.next(".section").toggleClass("collapsed");
      });
    });
  </script>
</head>
<body>
  <div class="axxs-accordion">
    <h2>Section with a Paragraph</h2>
    <p>Here is some text content</p>
    <h2>Section with a Div and Mixed Content</h2>
    <h3>Heading</h3>
    <p>Here is some content with text and a link.</p>
    <p><a href="#" target="_blank">Test link</a></p>
    <h2>Section with a List</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </div>
</body>
</html>

Explanation

HTML: Structure remains the same, with sections to be collapsed and expanded.
CSS: Adds styles for the headers and sections, including transitions for smooth collapsing and expanding.
JavaScript: Adds a click event to headers to toggle the collapsed class on the associated section, making it collapse or expand.

This setup ensures that clicking on a header will collapse or expand the corresponding section content.

Please signup or login to give your own answer.

Click here to cancel reply.

jQuery – wrap all elements between two elements

Answers

Explanation