Блог

 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, 151, 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, 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>