Remove wrapper div

Question

I have a little question. Our agency is working with Drupal, but we want to change some little things by ourselves. I'm skilled in HTML/CSS but not really in JS.

Now I have a problem. I paste my HTML code into a content part.

This is my HTML code:

<div class="accordion">          
    <div>
        <input type="radio" name="acc" id="question01" checked="">
        <label for="question01">question</label>
        <div class="accordion-content">
            <p>content</p>
        </div>
    </div>

It should be an accordion just with CSS. It works fine local but in the Drupal system there is a Javascript function which adds a <div> element around the <input> so my CSS doesn't work anymore which means I can't open the accordion anymore.

The HTML in Drupal:

<div class="accordion">
    <div>
        <div class="medium styledRadio" style="background-image: url(&quot;/assets/img/sprite-radiobuttons-medium.png&quot;); width: 23px; height: 24px; cursor: pointer; background-position: 0px 0px;">
            <input checked="checked" id="question01" name="acc" type="radio" class="medium" style="display: none;">
        </div> 
        <label for="question01">question</label>
        <div class="accordion-content">
            <p>content</p>
        </div>
    </div>

So my question is: Is there an easy way to overwrite this JavaScript? Maybe there is a short solution for removing this extra <div> just in the class="accordion" which I can add in this content part.

One easy solution would be adding `.medium.styledRadio{display:content;}.` `display:content` causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. Unfortunately this is still very new and doesn't work on all the browsers: https://caniuse.com/#search=display%3Acontent — enxaneta, Oct 29 '18 at 10:21
!! Correct link - I hope it will help: [SO - Removing wrapper div without Jquery (raw javascript)](https://stackoverflow.com/questions/11580292/removing-wrapper-div-without-jquery-raw-javascript) — Matt, Oct 29 '18 at 10:46

score 0 · Answer 1 · edited Oct 29 '18 at 12:27

0

The extra div can be removed using jQuery. I am not sure it is what you are looking for. Still it can be the solution to remove the extra div

var content = $(".styledRadio").contents();
$(".styledRadio").replaceWith(content);

edited Oct 29 '18 at 12:27

answered Oct 29 '18 at 10:42

Ashwin

211
1
7

score -1 · Answer 2 · answered Oct 29 '18 at 22:42

Welcome to Stack Overflow!

Do you have access to the code base? Then downloading and enabling this module probably would be a big helper: CKEditor Accordion

Adds a new button to Drupal 8's built in CKEditor which allows the user to create & display any type of content in an accordion format.

I tried to apply coding standards to your code snippets and realised that both of them are missing a closing </div>. Is this on purpose?

Do you use the Big Pipe module for caching and does this issue disappear when disabling it? (I once experienced something similar as explained here https://www.drupal.org/project/drupal/issues/2738685, which brings me to the next question.)

Which version of Drupal are you using?

Last but not least I'd like to mention that all other answers here are just trying to cure symptoms when the underlying problem is the JS that adds the extra <div> in the first place. But the even bigger "problem" is that you are trying to do that in an editor field. Which should be used for content, not for functionality.

There are a number of issues that arise when you try to build features in text fields. No code highlighting, no auto-indentation, no code-completion. Once finished it can be broken really easily by someone without your skills. No version-tracking, no search&replace in the code base, difficult to deploy to different environments with different databases.

In short: Don't do that. Try out the mentioned module. Or add another content type (maybe "Accordion item" and then display these nodes in a Views Accordion (accordion functionality applied to a View) and then place the View with a short code provided by Insert View anywhere in the content you want.

Or maybe I misunderstood the "I paste my HTML code into a content part." – which sounds as if you are trying to do this in the Drupal back-end in a textarea. Also worth to note that browsers sometimes auto-fix missing closing tags by putting them somewhere unexpected. — leymannx, Oct 29 '18 at 23:17

Remove wrapper div

2 Answers2