How to change the location of a tab with hidden text?

V

VokERton2022-03-04 18:14:11

HTML

VokERton, 2022-03-04 18:14:11

Good time.
I can’t figure it out ... Tell me how to make the contents of the tab appear not from the bottom of the button on the right side, while the first button was automatically opened.

My code:

<style>
.accordion {
 background-color: #eef0f1;
 color: #7a7a7a;
 cursor: pointer;
 padding: 18px;
 width: 250;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;
 text-transform: uppercase;
 transition: 0.4s;
 margin-bottom: 3px;
 vertical-align: middle;
 display: flex;
 align-items: center;
 }
 
 .active,
 .accordion:hover {
 background-color: #d8003f;
 color: #ffffff;
 display: flex;
 align-items: center;
 }
 
 .panel {
 padding: 0 18px;
 display: none;
 background-color: white;
 overflow: hidden;
 color: #7a7a7a;
 text-align: justify;
 text-indent: 25px;
 padding-top: 7px;
 padding-bottom: 10px;
 }
</style>

<div>
 <div>
 <h3 class="accordion" style="line-height: 10px; font-weight: normal;">1</h3>
 <div class="panel">
 <p>1</p>
 </div>
 </div>
 <div>
 <h3 class="accordion" style="line-height: 10px; font-weight: normal;">2</h3>
 <div class="panel">
 <p>2</p>
 </div>
 </div>
 <div>
 <h3 class="accordion" style="line-height: 10px; font-weight: normal;">3</h3>
 <div class="panel">
 <p>3</p>
 </div>
 </div>
 <div>
 <h3 class="accordion" style="line-height: 10px; font-weight: normal;">4</h3>
 <div class="panel">
 <p>4</p>
 </div>
 </div>
 <div>
 <h3 class="accordion" style="line-height: 10px; font-weight: normal;">5</h3>
 <div class="panel">
 <p>5</p>
 </div>
 </div>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
 var i;

 for (i = 0; i < acc.length; i++) {
 acc[i].addEventListener("click", function() {
 this.classList.toggle("active");
 var panel = this.nextElementSibling;
 if (panel.style.display === "block") {
 panel.style.display = "none";
 } else {
 panel.style.display = "block";
 }
 });
 }
</script>

Example layout as I'm trying to do with my style:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 300px;
}
</style>
</head>
<body>

<p>Нажмите на кнопки внутри меню с вкладками:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
     
</body>
</html>