如何将 jsfiddle 模型中的 jQuery 代码集成到 Divi 中？

如何解决如何将 jsfiddle 模型中的 jQuery 代码集成到 Divi 中？

我还是 jQuery 的新手，所以不要对我太苛刻。 在一些帮助下，我完成了创建显示机制的工作，现在我很难在我的 divi 网站上实施该机制： 我在 JSfiddle 上找到了一个适用于按钮 https://jsfiddle.net/lyrus/km6guw7n/38/ 的有效解决方案。

现在我想用可点击的简介而不是按钮来实现代码。我需要改变什么才能在 divi 主题中工作？

function myFunction(button) {
//get the numerical value of the button selected (parse it to an int)
var buttonID = parseInt(button.className.match(/\d+/));
//get the number of btn classes
var buttonCounter = $('.btn').length;
//iterate through each of the button classes
for (let i = 1; i <= buttonCounter; i++) {
    //matches the button selected to the element class
    if (i === buttonID) {
        $('.rv_element_' + i).slideToggle();
        $('.rv_button_' + i).toggleClass('rv_button_opened rv_button_closed');
        //if the element clicked has a class name that contains "element" scroll to the button,else scroll to the extra content
        if (button.className.indexOf("element") >= 0) {
            $('html,body').animate({
                scrollTop: $(".rv_button_" + buttonID).offset().top
            },1500);
        }
        else {
            $('html,body').animate({
                scrollTop: $(".rv_element_" + buttonID).offset().top
            },1500);
        }
    }
    else {
        //hide all of the open elements
        if ($('.rv_element_' + i).css('display') != 'none') {
            $('.rv_element_' + i).slideToggle(0);
        }
        //remove the open class name
        $('.rv_button_' + i).removeClass('rv_button_opened');
    }
}
}

.flex-container {

display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.flex-item1 {
display: flex;
background: grey;
text-align: center;
border: black 5px solid;

margin: 20px;
width: 384px;
max-width: 512px;
height: 400px;
}

.flex-item2 {
display: flex;
background: rgb(177,29,29);
text-align: center;
margin: 20px;
border: black 5px solid;
width: 512px;
height: 400px;
}

.flex-item3 {
display: flex;
text-align: center;
background: rgb(160,151,238);
margin: 20px;
width: 250px;
height: 400px;
}

.flex-item2block {
background: rgb(238,212);
display: block;
text-align: center;
position: relative;
display: none;
width: 100vw;

height: 50vh;
}

.flex-item3block {
background: rgb(60,62,218);
display: block;
text-align: center;
position: relative;
display: none;
width: 100vw;

height: 50vh;
}

.btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
background-color: rgba(0,255,0);
color: black;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="flex-container">


    <div class="flex-item2">
        <button class="rv_button_1 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_1 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item1">
        <button class="rv_button_2 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_2 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item3">
        <button class="rv_button_3 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_3 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item2">
        <button class="rv_button_4 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_4 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item2">
        <button class="rv_button_5 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_5 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item1">
        <button class="rv_button_6 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_6 flex-item2block" onclick="myFunction(this)">grid-item2block</div>



    <div class="flex-item3">
        <button class="rv_button_7 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_7 flex-item2block" onclick="myFunction(this)">grid-item3block</div>


    <div class="flex-item2">
        <button class="rv_button_8 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_8 flex-item2block" onclick="myFunction(this)">grid-item2block</div>


</div>
</section>

我将非常感谢有关如何更改代码以使其在 divi 主题中工作的一些想法。

在此先感谢您的帮助！