Screen is going to down, to footer exactely, after i click on Hide

Sorry for my english, but i try to be understood.

I have a small problem with my button "Read more & Hide".

const myFunction1=()=>{
    let dots= document.getElementById("butonulpunct1");
    let moreText = document.getElementById("butonulshow1");
    let btnText= document.getElementById("myBtn1");


    if (dots.style.display === "none") {
        dots.style.display="inline";
        btnText.innerHTML="READ MORE";
        moreText.style.display="none";
    } else {
        dots.style.display="none"      ;
        btnText.innerHTML="HIDE";
        moreText.style.display="inline";
    }
}


const myFunction2=()=>{
    let dots= document.getElementById("butonulpunct2");
    let moreText = document.getElementById("butonulshow2");
    let btnText= document.getElementById("myBtn2");


    if (dots.style.display === "none") {
        dots.style.display="inline";
        btnText.innerHTML="READ MORE";
        moreText.style.display="none";
    } else {
        dots.style.display="none"      ;
        btnText.innerHTML="HIDE";
        moreText.style.display="inline";
    }
}

const myFunction3=()=>{
    let dots= document.getElementById("butonulpunct3");
    let moreText = document.getElementById("butonulshow3");
    let btnText= document.getElementById("myBtn3");


    if (dots.style.display === "none") {
        dots.style.display="inline";
        btnText.innerHTML="READ MORE";
        moreText.style.display="none";
    } else {
        dots.style.display="none"      ;
        btnText.innerHTML="HIDE";
        moreText.style.display="inline";
    }
}

const myFunction4=()=>{
    let dots= document.getElementById("butonulpunct4");
    let moreText = document.getElementById("butonulshow4");
    let btnText= document.getElementById("myBtn4");


    if (dots.style.display === "none") {
        dots.style.display="inline";
        btnText.innerHTML="READ MORE";
        moreText.style.display="none";
    } else {
        dots.style.display="none"      ;
        btnText.innerHTML="HIDE";
        moreText.style.display="inline";
    }
}

const myFunction5=()=>{
    let dots= document.getElementById("butonulpunct5");
    let moreText = document.getElementById("butonulshow5");
    let btnText= document.getElementById("myBtn5");


    if (dots.style.display === "none") {
        dots.style.display="inline";
        btnText.innerHTML="READ MORE";
        moreText.style.display="none";
    } else {
        dots.style.display="none"      ;
        btnText.innerHTML="HIDE";
        moreText.style.display="inline";
    }
}
@import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Display:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');

.container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-size: 10px;
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
}
a {/* SCRISUL TITLULUI DE LA CASUTE-POSTARI */
    text-decoration: none;
    color: white; 
    transition: 1.5s;
    font-family: 'Montserrat', sans-serif;
}
a:hover{/* SCRISUL TITLULUI DE LA CASUTE-POSTARI[EFECTUL CLICK-ULUI] */
    color:red; 
}
img { /* ICONITELE FOOTER */
    height: 100%;
    width: 100%;
    object-fit: cover;
}
p { /* SCRISUL GENERAL POSTARI + CASUTE */
    color: black;
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 300;
    letter-spacing: .05rem;
}
h1{ /* TITLUL MARE DE LA POSTARI */
    font-size: 25px; 
    font-family: 'Handlee', cursive;
}
h2{ /* subTITLUL DE LA POSTARI, DIN STANGA */
    font-size: 6.8rem;
    font-weight: 500;
    letter-spacing: .2rem;
    margin-bottom: 10px;
}
hr{ /* BARA DE SUB TITLUL, CENTRATA*/
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    width: 50%;
}
.hr{ /* BARA DE SUB TITLUL, INTREAGA*/
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    width: 100%;
}
.scrispedata { /* SCRISUL DE DEASUPRA TITLULUI, SCRIS PE DATA*/
    font-family: ‘Merriweather’, Georgia, serif;
    font-size: 15px;
    font-variant: small-caps;
    font-weight: 700;
    line-height: 12.8px;
    text-align: center;
    padding-bottom: 5px;
}
.verde /* VERDE FONT CLASS */
{color: green;}
.rosu /* CRIMSON FONT CLASS */
{color: crimson;}
.portocaliu /* PORTOCALIU FONT CLASS */
{color: orange;}
.text-titlu {
    font-size: 4rem;
    font-weight: 300;
    color: black;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}

.butonul-arhiva { /* BUTONUL ARHIVA, SHOW/HIDE */
    display: inline-block;
    padding: 10px 10px;
    color: black;
    background-color: transparent;
    border: 2px solid crimson;
    border-radius: 5px 20px 5px;
    font-size: 2rem;
    text-transform: uppercase;
    margin-top: 0px;
    margin-left: 15px;
    transition: 1.5s ease;
    transition-property: background-color, color;
    cursor: pointer;

}
.butonul-arhiva:hover { /* BUTONUL ARHIVA, SHOW/HIDE EFECT*/
    color: white;
    background-color: crimson;
    transition-delay: .1s;
}
.center { /* BUTON CENTRAL LOCATIA */
  margin: 0;
  position: absolute;
  top: 85%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 80%;
}
.paginare-centrare{ /* PAGINARE */
    text-align: center;
}
.paginare {
    display: inline-block;
}
.paginare a {
    color: black;
    float: left;
    padding: 8px 10px;
    text-decoration: none;
    transition: background-color 1.3s;
    border: 1px solid #ddd;
    margin-left: 10px;
    border-radius: 30px;
    margin-bottom: 40px;
    margin-top: -65px;
}
.paginare a.activa{
  background-color: #DF8D7C;
  color: white;
  border-radius: 50%;
}
.paginare a:hover:not(.active) {
    background-color: #ddd;
    border-radius: : 10px;
}
.scrisul-inceput-sfarsit h1 {
    font-size: 2rem;
    color: white;
}
.scrisul-inceput-sfarsit h1 span {
    color: white;
}






#footer { /* SFARSIT*/
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
}
#footer .footer { /* SCRISUL DE JOS DE LA FOOTER, PRIMUL*/
    min-height: 50px;
    flex-direction: column;
    padding-top: 0px;
    padding-bottom: 0px;
}
#footer h2 {  /* SCRISUL DE JOS DE LA FOOTER, AL DOILEA*/
    color: white;
    font-weight: 200;
    font-size: 1.1rem;
    letter-spacing: .3rem;
    margin-top: 1px;
    margin-bottom: 1px;
}
#footer .social-icon { /* SPATIUL DE LA FOOTER, DE JOS*/
    display: flex;
    margin-bottom: 10px;
}
#footer .social-item { /* DIMENSIUNEA ICONITELOR DE JOS*/
    height: 50px;
    width: 50px;
    margin: 0 2px;
}
#footer .social-item img {
    filter: grayscale(1);
    transition: 2.5s ease filter;
}
#footer .social-item:hover img {
    filter: drop-shadow(16px 16px 20px red) invert(35%);
}
#footer p { /* DIMENSIUNEA SCRISULUI DE JOS WWW.VERSIUNE.RO*/
    color: white;
    font-size: 1.1rem;
}


.button1 {
  background-color: white;
  border: none; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
  margin: 4px 15%;
  cursor: pointer;
}
.button2 {
  background-color: #e6e6e6;
  border: none; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
  margin: 4px 22%;
  cursor: pointer;
}
.button3 {
  background-color: #bfbfbf;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
  margin: 4px 25%;
  cursor: pointer;
}
.button4 {
  background-color: #737373;
  border: none; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
  margin: 4px 30%;
  cursor: pointer;
}

.overlay { /* bara de LUMINOZITATE, DE JOS */
  height: 50%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 15%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 26px;
  color: #4d4d4d;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #000000
}
.overlay .closebtn {
  position: absolute;
  top: -45px;
  right: 45px;
  font-size: 85px;
  color: white;
}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}




#butonulshow1{display: none;}
#butonulshow2{display: none;}
#butonulshow3{display: none;}
#butonulshow4{display: none;}
#butonulshow5{display: none;}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel = "icon" href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" type = "image/x-icon"> 
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <link href=’http://fonts.googleapis.com/css?family=Merriweather&#8217;>
  <title>ASDASDASRO</title>
</head>
<body>
<!-- BARA DE NAVIGATIE, ELEMENTELE-->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="scrisul-inceput-sfarsit">
<a class="pointer" onclick="openNav()"><h1>Luminozitate</h1></a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li><a href="#postare" data-after="POSTARI">Arhiva Postarilor</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- PARTEA DE SUS, ELEMENTELE CENTRALE, EFECTE-->
<section id="inceput">
<div class="inceput container">
<div>
<h1> sadsadasdas <span></span></h1>
</div>
<div class="inceput center">
<div class="animate__animated animate__fadeIn animate__delay-1s animate__slower">
<div class="impinge-efect">
<a href="#postare" type="button" class="butonul-central">CITESTE</a>
</div>
</div>
</div>
</div>
<!-- SAGEATA CENTRALA-->
<div class="animate__animated animate__fadeIn animate__delay-2s">
<div class="arrow">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<!-- LUMINOZITATE BARA NAVIGATIE!!!-->
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a class="button1" onclick = "gfg_Run1()">100%</a>
<a class="button2" onclick = "gfg_Run2()">80%</a>
<a class="button3" onclick = "gfg_Run3()">70%</a>
<a class="button4" onclick = "gfg_Run4()">50%</a>
</div>
</div>
<section>
<p> ESTE UN TEST DE PROBA </p>
</section>
<!-- SECTIUNEA POSTARILOR CU BUTON SHOW/HIDE ABOUT-->
<section id="postare">
<div class="postare container">
<div class="col-right">






<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL5 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL5 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="scrispedata"> Articol scris în data de:<font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
<h1>ARTICLE NUMBER 3!</h1>
<hr>
<div>
<p>

The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor of the 100th anniversary of the birth of Ulysses S. Grant, a leading U.</p>



<span id="butonulpunct5"></span> <span id="butonulshow5">

<h2> Dar, oare, ce parere are ea?</h2>
<p>About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and </p>


<div class="hr"> </div>


</span>

<a onclick="myFunction5()" id="myBtn5" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
</div>
<!-- **********************************************************************************************************-->







<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL4 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL4 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="scrispedata"> Articol scris în data de:<font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
<h1>ARTICLE NUMBER 3!</h1>
<hr>
<div>
<p>

The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor of the 100th anniversary of the birth of Ulysses S. Grant, a leading Union general during the Civil War and later the 18th president of the United States. The two coins are identical in 
</p>


<span id="butonulpunct4"></span> <span id="butonulshow4"> <br>

<p>
About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has  </p>

<div class="hr"> </div>


</span>
</p>
<a onclick="myFunction4()" id="myBtn4" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
</div>
<!-- **********************************************************************************************************-->

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL3 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL3 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="scrispedata"> Articol scris în data de:<font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
<h1>ARTICLE10</h1>
<hr>
<div>
<p>

The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor of the 100th anniversary of the birth of Ulysses S. Grant, a leading Union general during the Civil War and later the 18th  </p>



<span id="butonulpunct3"></span><span id="butonulshow3">


<p>About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited.<br><br> Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold.<br><br></p>  <h2>Dar oare, se va schimba ceva?</h2><p> 
The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed. </p>

<div class="hr"> </div>


</span>
<a href="#my-section" onclick="myFunction3()" id="myBtn3" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
</div>
<!-- **********************************************************************************************************-->






<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="scrispedata"> Articol scris în data de:<font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
<h1>ARTICLE NUMBER 3!</h1>
<hr>
<div>
<p>

The Grant Memorial gold dollar and silver half dollar were 
</p>



<span id="butonulpunct2"></span> <span id="butonulshow2"> <br>

<p>
About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and m
</p>

<div class="hr"> </div>


</span>
<a onclick="myFunction2()" id="myBtn2" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
</div>
<!-- **********************************************************************************************************-->






<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="scrispedata">Scris pe:<font class="verde"> 19/01/2019, 20.38 AM </font><br><br><br></div>
 <h1>ARTICLE NUMBER 3!</h1>
 <hr>
<div>
<p>

The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor o
</p>


<span id="butonulpunct1"></span>  <span id="butonulshow1"><br>

<p>
The Grant Memorial gold dollar and silver half dollar were 
</p>

<div class="hr"> </div>

</span> 
<a onclick="myFunction1()" id="myBtn1" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
</div>
<!-- **********************************************************************************************************-->






</div>
</div>
</section>



 <!-- SFARSITUL SITE-ULUI -->
<section id="footer">
<div class="footer container">
<div class="scrisul-inceput-sfarsit">
</div>
<div class="social-icon">
<div class="social-item">
<a href="https://www.facebook.com/versadasiune"><img src="https://img.icons8.com/bubbles/100/000000/facebook-new.png"/></a>
</div>
<div class="social-item">
<a href="https://www.instagram.com/versiune.ro/"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png"/></a>
</div>
<div class="social-item">
<a href="#"><img src="https://img.icons8.com/bubbles/100/000000/twitter.png"/></a>
</div>
<div class="social-item">
<a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png"/></a>
</div>
</div>
<p>www.vsadasvfdsne.ro</p>
</div>
</section>

<script src="./scripturi-java/app.js"></script>


</body>
</html>

Problem:
When I click on "Read more", the text is visible, very nice.
When I click on "Hide", the text disappears. Good, but not.
The problem occurs after I click on "Hide", because my screen is going down to footer.

Please, click on "Read more" and then click on "Hide" for the "ARTICLE10" from this code, and you will see the problem.

Can you help me, please, with a solution? Thank you very much!

12 thoughts on “Screen is going to down, to footer exactely, after i click on Hide”

  1. You can scroll to the article heading when the "Hide" button is clicked.

    <h1 id="article-10>ARTICLE10</h1>
    
    const myFunction3 = () => {
      
      // ... 
    
      // new code at bottom to scroll
      const h1 = document.getElementById('article-10');
      h1.scrollIntoView(true);
    }
    
    const myFunction1 = () => {
      let dots = document.getElementById("butonulpunct1");
      let moreText = document.getElementById("butonulshow1");
      let btnText = document.getElementById("myBtn1");
    
    
      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "READ MORE";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btnText.innerHTML = "HIDE";
        moreText.style.display = "inline";
      }
    }
    
    
    const myFunction2 = () => {
      let dots = document.getElementById("butonulpunct2");
      let moreText = document.getElementById("butonulshow2");
      let btnText = document.getElementById("myBtn2");
    
    
      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "READ MORE";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btnText.innerHTML = "HIDE";
        moreText.style.display = "inline";
      }
    }
    
    const myFunction3 = () => {
      let dots = document.getElementById("butonulpunct3");
      let moreText = document.getElementById("butonulshow3");
      let btnText = document.getElementById("myBtn3");
    
    
      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "READ MORE";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btnText.innerHTML = "HIDE";
        moreText.style.display = "inline";
      }
    
      // new code
      const h1 = document.getElementById('article-10');
      h1.scrollIntoView(true);
    }
    
    const myFunction4 = () => {
      let dots = document.getElementById("butonulpunct4");
      let moreText = document.getElementById("butonulshow4");
      let btnText = document.getElementById("myBtn4");
    
    
      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "READ MORE";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btnText.innerHTML = "HIDE";
        moreText.style.display = "inline";
      }
    }
    
    const myFunction5 = () => {
      let dots = document.getElementById("butonulpunct5");
      let moreText = document.getElementById("butonulshow5");
      let btnText = document.getElementById("myBtn5");
    
    
      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "READ MORE";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btnText.innerHTML = "HIDE";
        moreText.style.display = "inline";
      }
    }
    @import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';
    @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Display:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
    .container {
      min-height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    html {
      font-size: 10px;
      font-family: 'Montserrat', sans-serif;
      scroll-behavior: smooth;
    }
    
    a {
      /* SCRISUL TITLULUI DE LA CASUTE-POSTARI */
      text-decoration: none;
      color: white;
      transition: 1.5s;
      font-family: 'Montserrat', sans-serif;
    }
    
    a:hover {
      /* SCRISUL TITLULUI DE LA CASUTE-POSTARI[EFECTUL CLICK-ULUI] */
      color: red;
    }
    
    img {
      /* ICONITELE FOOTER */
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    
    p {
      /* SCRISUL GENERAL POSTARI + CASUTE */
      color: black;
      font-size: 1.4rem;
      margin-top: 5px;
      line-height: 2.5rem;
      font-weight: 300;
      letter-spacing: .05rem;
    }
    
    h1 {
      /* TITLUL MARE DE LA POSTARI */
      font-size: 25px;
      font-family: 'Handlee', cursive;
    }
    
    h2 {
      /* subTITLUL DE LA POSTARI, DIN STANGA */
      font-size: 6.8rem;
      font-weight: 500;
      letter-spacing: .2rem;
      margin-bottom: 10px;
    }
    
    hr {
      /* BARA DE SUB TITLUL, CENTRATA*/
      display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: auto;
      margin-right: auto;
      border-style: inset;
      border-width: 1px;
      width: 50%;
    }
    
    .hr {
      /* BARA DE SUB TITLUL, INTREAGA*/
      display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: auto;
      margin-right: auto;
      border-style: inset;
      border-width: 1px;
      width: 100%;
    }
    
    .scrispedata {
      /* SCRISUL DE DEASUPRA TITLULUI, SCRIS PE DATA*/
      font-family: ‘Merriweather’, Georgia, serif;
      font-size: 15px;
      font-variant: small-caps;
      font-weight: 700;
      line-height: 12.8px;
      text-align: center;
      padding-bottom: 5px;
    }
    
    .verde
    /* VERDE FONT CLASS */
    
    {
      color: green;
    }
    
    .rosu
    /* CRIMSON FONT CLASS */
    
    {
      color: crimson;
    }
    
    .portocaliu
    /* PORTOCALIU FONT CLASS */
    
    {
      color: orange;
    }
    
    .text-titlu {
      font-size: 4rem;
      font-weight: 300;
      color: black;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: .2rem;
      text-align: center;
    }
    
    .butonul-arhiva {
      /* BUTONUL ARHIVA, SHOW/HIDE */
      display: inline-block;
      padding: 10px 10px;
      color: black;
      background-color: transparent;
      border: 2px solid crimson;
      border-radius: 5px 20px 5px;
      font-size: 2rem;
      text-transform: uppercase;
      margin-top: 0px;
      margin-left: 15px;
      transition: 1.5s ease;
      transition-property: background-color, color;
      cursor: pointer;
    }
    
    .butonul-arhiva:hover {
      /* BUTONUL ARHIVA, SHOW/HIDE EFECT*/
      color: white;
      background-color: crimson;
      transition-delay: .1s;
    }
    
    .center {
      /* BUTON CENTRAL LOCATIA */
      margin: 0;
      position: absolute;
      top: 85%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 80%;
    }
    
    .paginare-centrare {
      /* PAGINARE */
      text-align: center;
    }
    
    .paginare {
      display: inline-block;
    }
    
    .paginare a {
      color: black;
      float: left;
      padding: 8px 10px;
      text-decoration: none;
      transition: background-color 1.3s;
      border: 1px solid #ddd;
      margin-left: 10px;
      border-radius: 30px;
      margin-bottom: 40px;
      margin-top: -65px;
    }
    
    .paginare a.activa {
      background-color: #DF8D7C;
      color: white;
      border-radius: 50%;
    }
    
    .paginare a:hover:not(.active) {
      background-color: #ddd;
      border-radius: : 10px;
    }
    
    .scrisul-inceput-sfarsit h1 {
      font-size: 2rem;
      color: white;
    }
    
    .scrisul-inceput-sfarsit h1 span {
      color: white;
    }
    
    #footer {
      /* SFARSIT*/
      background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    }
    
    #footer .footer {
      /* SCRISUL DE JOS DE LA FOOTER, PRIMUL*/
      min-height: 50px;
      flex-direction: column;
      padding-top: 0px;
      padding-bottom: 0px;
    }
    
    #footer h2 {
      /* SCRISUL DE JOS DE LA FOOTER, AL DOILEA*/
      color: white;
      font-weight: 200;
      font-size: 1.1rem;
      letter-spacing: .3rem;
      margin-top: 1px;
      margin-bottom: 1px;
    }
    
    #footer .social-icon {
      /* SPATIUL DE LA FOOTER, DE JOS*/
      display: flex;
      margin-bottom: 10px;
    }
    
    #footer .social-item {
      /* DIMENSIUNEA ICONITELOR DE JOS*/
      height: 50px;
      width: 50px;
      margin: 0 2px;
    }
    
    #footer .social-item img {
      filter: grayscale(1);
      transition: 2.5s ease filter;
    }
    
    #footer .social-item:hover img {
      filter: drop-shadow(16px 16px 20px red) invert(35%);
    }
    
    #footer p {
      /* DIMENSIUNEA SCRISULUI DE JOS WWW.VERSIUNE.RO*/
      color: white;
      font-size: 1.1rem;
    }
    
    .button1 {
      background-color: white;
      border: none;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 10px;
      margin: 4px 15%;
      cursor: pointer;
    }
    
    .button2 {
      background-color: #e6e6e6;
      border: none;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 10px;
      margin: 4px 22%;
      cursor: pointer;
    }
    
    .button3 {
      background-color: #bfbfbf;
      border: none;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 10px;
      margin: 4px 25%;
      cursor: pointer;
    }
    
    .button4 {
      background-color: #737373;
      border: none;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 10px;
      margin: 4px 30%;
      cursor: pointer;
    }
    
    .overlay {
      /* bara de LUMINOZITATE, DE JOS */
      height: 50%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 50%;
      left: 0;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.9);
      overflow-x: hidden;
      transition: 0.5s;
    }
    
    .overlay-content {
      position: relative;
      top: 15%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }
    
    .overlay a {
      padding: 8px;
      text-decoration: none;
      font-size: 26px;
      color: #4d4d4d;
      display: block;
      transition: 0.3s;
    }
    
    .overlay a:hover,
    .overlay a:focus {
      color: #000000
    }
    
    .overlay .closebtn {
      position: absolute;
      top: -45px;
      right: 45px;
      font-size: 85px;
      color: white;
    }
    
    @media screen and (max-height: 450px) {
      .overlay a {
        font-size: 20px
      }
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
    
    #butonulshow1 {
      display: none;
    }
    
    #butonulshow2 {
      display: none;
    }
    
    #butonulshow3 {
      display: none;
    }
    
    #butonulshow4 {
      display: none;
    }
    
    #butonulshow5 {
      display: none;
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <link rel="icon" href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" type="image/x-icon">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
      <link href=’http://fonts.googleapis.com/css?family=Merriweather&#8217;>
      <title>ASDASDASRO</title>
    </head>
    
    <body>
      <!-- BARA DE NAVIGATIE, ELEMENTELE-->
      <section id="header">
        <div class="header container">
          <div class="nav-bar">
            <div class="scrisul-inceput-sfarsit">
              <a class="pointer" onclick="openNav()">
                <h1>Luminozitate</h1>
              </a>
            </div>
            <div class="nav-list">
              <div class="hamburger">
                <div class="bar"></div>
              </div>
              <ul>
                <li><a href="#postare" data-after="POSTARI">Arhiva Postarilor</a></li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!-- PARTEA DE SUS, ELEMENTELE CENTRALE, EFECTE-->
      <section id="inceput">
        <div class="inceput container">
          <div>
            <h1> sadsadasdas <span></span></h1>
          </div>
          <div class="inceput center">
            <div class="animate__animated animate__fadeIn animate__delay-1s animate__slower">
              <div class="impinge-efect">
                <a href="#postare" type="button" class="butonul-central">CITESTE</a>
              </div>
            </div>
          </div>
        </div>
        <!-- SAGEATA CENTRALA-->
        <div class="animate__animated animate__fadeIn animate__delay-2s">
          <div class="arrow">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </section>
      <!-- LUMINOZITATE BARA NAVIGATIE!!!-->
      <div id="myNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
          <a class="button1" onclick="gfg_Run1()">100%</a>
          <a class="button2" onclick="gfg_Run2()">80%</a>
          <a class="button3" onclick="gfg_Run3()">70%</a>
          <a class="button4" onclick="gfg_Run4()">50%</a>
        </div>
      </div>
      <section>
        <p> ESTE UN TEST DE PROBA </p>
      </section>
      <!-- SECTIUNEA POSTARILOR CU BUTON SHOW/HIDE ABOUT-->
      <section id="postare">
        <div class="postare container">
          <div class="col-right">
    
    
    
    
    
    
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL5 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL5 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="scrispedata"> Articol scris în data de:
              <font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
            <h1>ARTICLE NUMBER 3!</h1>
            <hr>
            <div>
              <p>
    
                The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor of the 100th anniversary of the birth of Ulysses S. Grant, a leading U.</p>
    
    
    
              <span id="butonulpunct5"></span> <span id="butonulshow5">
    
    <h2> Dar, oare, ce parere are ea?</h2>
    <p>About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and </p>
    
    
    <div class="hr"> </div>
    
    
    </span>
    
              <a onclick="myFunction5()" id="myBtn5" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
            </div>
            <!-- **********************************************************************************************************-->
    
    
    
    
    
    
    
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL4 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL4 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="scrispedata"> Articol scris în data de:
              <font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
            <h1>ARTICLE NUMBER 3!</h1>
            <hr>
            <div>
              <p>
    
                The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor of the 100th anniversary of the birth of Ulysses S. Grant, a leading Union general during the Civil War and later the 18th president
                of the United States. The two coins are identical in
              </p>
    
    
              <span id="butonulpunct4"></span> <span id="butonulshow4"> <br>
    
    <p>
    About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has  </p>
    
    <div class="hr"> </div>
    
    
    </span>
              </p>
              <a onclick="myFunction4()" id="myBtn4" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
            </div>
            <!-- **********************************************************************************************************-->
    
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL3 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL3 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="scrispedata"> Articol scris în data de:
              <font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
            <h1 id="article-10">ARTICLE10</h1>
            <hr>
            <div>
              <p>
    
                The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor of the 100th anniversary of the birth of Ulysses S. Grant, a leading Union general during the Civil War and later the 18th </p>
    
    
    
              <span id="butonulpunct3"></span><span id="butonulshow3">
    
    
    <p>About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited.<br><br> Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold.<br><br></p>  <h2>Dar oare, se va schimba ceva?</h2><p> 
    The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed.About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and most of the half dollars sold. The half dollar with star has long been priced higher than most commemoratives; its rarity has also caused it to be counterfeited. Money from the coins was used to help preserve Grant's birthplace, but other planned projects were not completed. </p>
    
    <div class="hr"> </div>
    
    
    </span>
              <a href="#my-section" onclick="myFunction3()" id="myBtn3" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
            </div>
            <!-- **********************************************************************************************************-->
    
    
    
    
    
    
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="scrispedata"> Articol scris în data de:
              <font class="verde"> 19/01/2019, ora 20.38 AM </font><br><br><br></div>
            <h1>ARTICLE NUMBER 3!</h1>
            <hr>
            <div>
              <p>
    
                The Grant Memorial gold dollar and silver half dollar were
              </p>
    
    
    
              <span id="butonulpunct2"></span> <span id="butonulshow2"> <br>
    
    <p>
    About 5,000 of each denomination were struck with a special mark, a star (example pictured). All of the gold dollars and m
    </p>
    
    <div class="hr"> </div>
    
    
    </span>
              <a onclick="myFunction2()" id="myBtn2" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
            </div>
            <!-- **********************************************************************************************************-->
    
    
    
    
    
    
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARTICOL1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="scrispedata">Scris pe:
              <font class="verde"> 19/01/2019, 20.38 AM </font><br><br><br></div>
            <h1>ARTICLE NUMBER 3!</h1>
            <hr>
            <div>
              <p>
    
                The Grant Memorial gold dollar and silver half dollar were struck by the United States Bureau of the Mint in 1922 in honor o
              </p>
    
    
              <span id="butonulpunct1"></span> <span id="butonulshow1"><br>
    
    <p>
    The Grant Memorial gold dollar and silver half dollar were 
    </p>
    
    <div class="hr"> </div>
    
    </span>
              <a onclick="myFunction1()" id="myBtn1" class="butonul-arhiva">READ MORE</a> <br><br><br><br><br><br><br>
            </div>
            <!-- **********************************************************************************************************-->
    
    
    
    
    
    
          </div>
        </div>
      </section>
    
    
    
      <!-- SFARSITUL SITE-ULUI -->
      <section id="footer">
        <div class="footer container">
          <div class="scrisul-inceput-sfarsit">
          </div>
          <div class="social-icon">
            <div class="social-item">
              <a href="https://www.facebook.com/versadasiune"><img src="https://img.icons8.com/bubbles/100/000000/facebook-new.png" /></a>
            </div>
            <div class="social-item">
              <a href="https://www.instagram.com/versiune.ro/"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png" /></a>
            </div>
            <div class="social-item">
              <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/twitter.png" /></a>
            </div>
            <div class="social-item">
              <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" /></a>
            </div>
          </div>
          <p>www.vsadasvfdsne.ro</p>
        </div>
      </section>
    
      <script src="./scripturi-java/app.js"></script>
    
    
    </body>
    
    </html>
    Reply
  2. terrymorse, you are great! Thank you very much for the help.

    One more thing.
    When I click "Hide", the screen is going to article 10.

    Can you make this:
    After I read "ARTICLE10" and I press "Hide", the screen will go to the next article, wich is below.

    What I need to modify here?

    const h6 = document.getElementById(‘article-10’);
    h6.scrollIntoView(true);

    Because when I put "article-11" instead of "article-10", when I click "Read more", is going to article 11.
    I want it to happen just for "Hide", not for "Read more".

    I hope it’s understood. Thank you!!!

    Reply

Leave a Comment