Solution 1 :

First of all, your function has “div” that is not defined anywhere.

Second, you can use this code to toggle the visibility of your logo:

document.getElementById("_bar_Id_").onclick = function() {
var x = document.getElementById("logo2");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
  x.style.visibility = "hidden";
  }
}

Then, just remember to add the “_bar_Id_” to your “font awesome” bar.

<div id="_bar_Id_" class="container7">

Problem :

I want the icon with the id logo2 to hide when the “font awesome” bar is clicked and to display when the button is again clicked i.e The nav bar hides it but it shows up when using mobile device’s width. Please help.
This is my html

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShaurEducationalComplex</title>
    <script src="app.js"></script>
    <link rel="stylesheet" tyle="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
  <!-- This is the first blue block -->
         <!-- This is for testing may it works -->
     <div class="container7">
      <div class="box7">
          <div class="container7inside">

              <div class="box7inside">
              <a href="https://www.facebook.com/saylaniwelfare/"><i id="iconabove" class="fab fa-facebook-f"></i></a>      
              </div>
              <div class="box7inside">
              <a href="https://twitter.com/OfficialSwit"><i id="iconabove" class="fab fa-twitter"></i></a>        
              </div>
              <div class="box7inside">
                  <a href="https://www.instagram.com/saylaniwelfare/"><i id="iconabove" class="fab fa-instagram"></i></a>

              </div>
              <div class="box7inside">
                  <a href="https://www.youtube.com/c/SaylaniWelfareTrustOfficialPage"><i id="iconabove" class="fab fa-youtube"></i></a>

              </div>
              <div class="box7inside">
                  <a href="https://api.whatsapp.com/send?phone=923331201585&text=&source=&data=&app_absent="><i id="iconabove" class="fab fa-whatsapp"></i></a>

              </div>    
          </div>
          <!-- This is for testing may it works  -->
      </div>
      <div class="box7para">        
        The Institute of Excellence in Education
      </div>
      <div class="box7para">
          <span id="btns">
              <!-- <button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/home'" type="button">
                &nbsp&nbspUK Donor&nbsp&nbsp</button>
               <button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/Online-Sadqah'" type="button">
                    &nbsp&nbspDonate Now&nbsp&nbsp</button> -->
                    <button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/result'" type="button">
                     &nbsp&nbspBOARD Results&nbsp&nbsp</button>
          </span>
      </div>
  </div>
  <!-- This is the first blue block -->
 <!-- This is the coding nepal navigation bar -->
 <nav>
   <!-- <div class="logo"><img src="Images/dha_es_logo-1.png" alt=""></div> -->
   <label for="btn" class="icon">
     <span id="_bar_Id_" class="fa fa-bars"></span>
   </label>
   <input type="checkbox" id="btn">
   <ul>

     <li><a href="#">Home</a></li>
     <li>
       <label for="btn-1" class="show">Features +</label>
       <a href="#">Features</a>
       <input type="checkbox" id="btn-1">

       <ul>
         <li><a href="#">Pages</a></li>
         <li><a href="#">Elements</a></li>
         <li><a href="#">Icons</a></li>
        </ul>
     </li>
     <li>
      <label for="btn-2" class="show">Services +</label>
      <a href="#">Services</a>
      <input type="checkbox" id="btn-2">

      <ul>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Elements</a></li>
        <li>
          <label for="btn-3" class="show">More +</label>
          <a href="#">More
            <span class="fas fa-caret-down"></span>
          </a>
          <input type="checkbox" id="btn-3">
          <ul>
            <li><a href="#">Submenu-1</a></li>
            <li><a href="#">Submenu-2</a></li>
            <li><a href="#">Submenu-3</a></li>
          </ul>

        </li>
        <li><a href="#">Pages</a></li>
      </ul>
     </li>

     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Portfolio</a></li>

   </ul>
 </nav>
 <!-- This is the coding nepal navigation bar -->

 <!-- <div><img class="logo2" src="Images/dha_es_logo-1.png" alt=""></div> -->
 <div id="logo2"><img src="Images/dha_es_logo-1.png" alt=""></div>



<!-- This is the slideshow -->
<div id="slideshow">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img id="image" src="Images/jmjcoKA.jpg" class="d-block w-100" alt="This is image 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img id="image" src="Images/2ndpic.jpg" class="d-block w-100" alt="This is image 2">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img id="image" src="Images/weJHcPH.jpg" class="d-block w-100" alt="This is image 3">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<!-- This is the slideshow -->


<!-- this is the marquee tag -->
<div id="containermarq">
<marquee id="marq" width="80%" direction="right" height="60px">
  <div id="txtmarq">  This is a sample scrolling text that has scrolls texts to right.
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora ex, consectetur fuga quibusdam quas quae odio! Perspiciatis eaque ex, animi nisi minus harum vero possimus aspernatur adipisci cum ullam exercitationem?
  </div>
</div>
</marquee>
<!-- this is the marquee tag -->



<!-- A warm welcome -->
<div class="welcome">
   <div id="welcomehead"><div></div>
     <br>&nbsp&nbsp&nbsp&nbsp&nbspAbout Us :
     <div id="welcomepara">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere repellat fugit blanditiis! Voluptates aliquam distinctio laboriosam quibusdam debitis pariatur, assumenda corrupti dolorum aperiam tempore, vel ad ex exercitationem doloribus explicabo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt facilis vero modi, odit ex delectus asperiores quasi corrupti minus, tempora quos culpa quis ullam non labore dolore. Soluta, debitis!
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim harum magni, quasi ducimus facilis quidem hic dolores. Facilis quis qui dolores. Deleniti quae, sint eligendi eaque molestiae a dolor perferendis?
       <br><br><br><br>
     </div>
   </div>
</div>
<!-- A warm welcome -->

<div id="welcomehead">
  &nbsp&nbsp&nbsp&nbsp&nbspEvents :
</div>

<!-- This is the community support -->
<div class="container3">
  <div class="box3">  
    <img id="img2" src="Images/2ndpic.jpg">
    <div class="overlay1">
      <div class="text">Art day</div>
    </div>
    <div class="txtover">Art day</div>
 </div>

 <div class="box3">
   <img id="img2" src="Images/small2.jfif">
   <div class="overlay1">
    <div class="text">Eid Millan day</div>
  </div>
  <div class="txtover">Eid Millan day</div>
</div>

 <div class="box3">
  <img id="img2" src="Images/small3.jfif">
  <div class="overlay1">
    <div class="text">Food Gala</div>
  </div>
  <div class="txtover">Food Gala</div>
</div>

 <div class="box3">
  <img id="img2" src="Images/image1.jfif">
  <div class="overlay1">
    <div class="text">Fun Factory Trip</div>
  </div>
  <div class="txtover">Fun Factory Trip</div>
</div>
</div>
<!-- This is the community support -->

<div id="mapbox">
  <div id="divsocial">
    <div style="border: 1px solid red;margin-left: 20px;color: black;visibility: visible;">SEC on Social Media</div>
    <br>
          <div id="icondown">
          <div><a href="https://www.facebook.com/saylaniwelfare/"><i id="icondf" class="fab fa-facebook-f"></i></a></div>
          <div><a href="https://twitter.com/OfficialSwit"><i id="icondt" class="fab fa-twitter"></i></a></div>        
          <div><a href="https://www.instagram.com/saylaniwelfare/"><i id="icondi" class="fab fa-instagram"></i></a></div> 
          <div><a href="https://www.youtube.com/c/SaylaniWelfareTrustOfficialPage"><i id="icondy" class="fab fa-youtube"></i></a></div>
          <div><a href="https://api.whatsapp.com/send?phone=923331201585&text=&source=&data=&app_absent="><i id="icondw" class="fab fa-whatsapp"></i></a></div>
          </div>
  </div>

<iframe id="map" src="https://www.google.com/maps/d/embed?mid=1AIsf-4etCQOgWKawr8kp-6CFGp1jsZ-9" width="640" height="480"></iframe>
</div>

<!-- This is for the picture flex box hover -->
<div class="container2">
  <div class="box2">  
<img id="img2" src="Images/small1.jfif">
<div class="overlay">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam 
</div>
 </div>

 <div class="box2">
<img id="img2" src="Images/small2.jfif">
<div class="overlay">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam 
</div>
</div>

 <div class="box2">
<img id="img2" src="Images/small3.jfif">
<div class="overlay">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam d
</div>
</div>

 <div class="box2">
  <img id="img2" src="Images/2ndpic.jpg">
<div class="overlay">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam 
</div>
</div>
</div>
<!-- This is for the picture flex box hover --> 

<div style="border: 1px solid white;background-color: transparent;width: 100px;height: 100px;"></div>

 <!-- This is the bootstrap js -->
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 <!-- This is the bootstrap js -->
</body>
</html>

#btns{
        line-height: 0px;
    }
    #btn3{
        margin-bottom: 7px;
        background-color:whitesmoke;
        color: darkolivegreen;
        height: 30px;
    }
    .btns{
        background-color: DodgerBlue; /* Blue background */
        border: none; /* Remove borders */
        color: white; /* White text */

      }

      /* Darker background on mouse-over */
      .btns:hover {
        background-color: RoyalBlue;
      }
    .container7{
        margin-left:0px;
        margin-top: 0px;
        width: 100%;
        min-height: 40px;
        background-color:aliceblue;
        border-bottom: 1px solid aliceblue;
        /*add flexbox style*/
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-flow: wrap;
        animation-name: fade;
        animation-duration: 3s;             
        animation-fill-mode: forwards; 
    }
    .box7{
        width: fit-content;
        height: 20px;
        box-sizing: border-box;
        align-items:center;
        text-align: center;
        justify-content: center;
    }
    #iconabove{
        margin-top: 10px;
        text-align: center;
        font-size: 20px;
        color:purple;
        transition: 0.2s linear;
    }
    #iconabove:hover{
       color:white;
       background-color:transparent;
    }
    .container7inside{
        margin-left:0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        width: 100%;
        min-height: fit-content;
        background:transparent;
        /*add flexbox style*/
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-flow: wrap;

    }
    .box7inside{
        width: 35px;
        height: fit-content;
        box-sizing: border-box;
        display: inline-block;
        background: #f1f1f1;
        margin: 3px;
        box-shadow: 0 5px 15px -5px #00000070;
        color:aliceblue;
        overflow: hidden;
        position: relative;
        border-radius: 30%;
    }
    .box7inside:hover{
        transform: scale(1.3);
        color:aliceblue;

       background-color:#1b1b1b;
    }
    .box7inside::before{
        width: 120%;
        height: 120%;
        background:transparent;
        transform: rotate(45deg);
        left: -110%;
        transition: 0.2s linear;
        top:90%
    }
    .box7inside:hover::before{
        animation: aaa 0.7s 1;
        top: -10%;
        left: -10%;
    }
    @keyframes aaa{
        0%{
            left: -110%;
            top:90%
        }50%{
            left: 10%;
            top:-30%
        }100%{
            top: -10%;
            left: -10%;
        }
    }
    .box7para{
        font-size: 18px;
        line-height: 40px;
        margin-left: 80px;
        margin-right: 0px;
        color: purple;

    }

    /* This is for navigation bar */
    *{
        margin: 0;
        padding: 0;
        color: white;
        box-sizing: border-box;
        font-family: sans-serif;
    }
    body{
         background: #1b1b1b;
        /* background: radial-gradient(#1b1b1b, black); */
    }
    nav{
        background:purple;
        position: relative;
          top: 0;
          width: 100%;
          height: fit-content;
          left: 0;
        /* background: radial-gradient(#1b1b1b, rgb(15, 15, 46),rgb(49, 48, 65),black); */

    }
    #logo2{
        float: left;
        width: 200px;
        height: 200px;
        background-color: aliceblue;
        position: absolute;
        top: 40px;
        left: 10px;

    }
    nav::after{
        content: '';
        clear: both;
        display: table;
    }
    nav ul{
        float: right;
        list-style: none;
        margin-left: 0px;
        margin-right: 50px;
        line-height: 10px;
        position: relative;
    }
    nav ul li{
        float: left;
        display: inline-block;
        background:transparent;
        margin: 0 5px;
    }
    nav ul li a{    
        color:purple;
        background-color:aliceblue;
        text-decoration: none;
        line-height: 70px;
        font-size: 18px;
        padding: 8px 15px;
    }
    nav ul li a:hover{
        position: relative;
        z-index: 10000;
        text-decoration: none;
        color: red;
        border-radius: 5px;
        box-shadow: 0 0 5px #33ffff,
                    0 0 5px #66ffff;
    }
    nav ul ul li a:hover{
        position: relative;
        z-index: 10000;
        color: cyan;
        box-shadow: none;
    }
    nav ul ul li{
        background-color: cornsilk;
    }
    nav ul ul li a{
        color: black;
        line-height: 50px;
    }
    nav ul ul li a:hover{
        color:orange;
    }
    nav ul li:hover > ul{

        top: 70px;
        opacity: 1;
        visibility: visible;
    }
    nav ul ul{
        position: absolute;
        top: 90px;
        border-top: 3px solid cyan;
        opacity: 0;
        line-height: 50px;
        visibility: hidden;
        transition: top .3s;
    }
    nav ul ul ul{
        border-top: none;
        line-height: 50px;
    }
    nav ul ul li{    
        position: relative;
        margin: 0px;
        width: 150px;
        line-height: 50px;
        float: none;
        display: list-item;
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    nav ul ul li a{
        line-height: 50px;

    }

    #slideshow{
        position: relative;
        z-index: -1;
    }
    #image{
        width: 100%;
        height: 500px;
    }
    nav ul ul ul li{
        position: relative;
        top: -70px;
        color: #1b1b1b;
        left:150px;
    }
    /* This is for navigation bar coding nepal */
    .fa-caret-down{
        margin-left: 40px;
        font-size: 15px;
        color: black
    }
    /* second part responsive nav bar */
    .show,.icon, input{
        display: none;
    }
    nav ul li ul li a{
        color: black;
    }
    /* responsive part for navigation bar */
    @media all and (max-width:690px)
    {
        #logo2{
            top: 80px;
            }

    }
    @media all and (max-width: 968px)
    {

        nav ul{
            margin-right: 0px;
            float:left;
            color: azure;
        }
        nav .logo{
            padding-left: 0px;
            visibility: visible;

            position: static;
            float: left;
            width: auto;
        }
        nav ul li,nav ul ul li{
            display:block;
            width: 100%;
        }
        nav ul ul{
            top:70px;
            position: static;
            border-top: none;
            float:none;
            display: none;
            opacity:1;
            visibility: visible;
        }
        nav ul ul ul li{
            position: static;
        }
        nav ul ul li{
            border-bottom: 0px;
        }
        nav ul ul a{
        padding-left: 40px;
        }
        nav ul ul ul a{
            padding-left: 80px;
        }
        .show{
            display: block;
            color:purple;
            font-size: 18px;
            padding: 0 20px;
            line-height: 40px;
            width: fit-content;
            height: 40px;
            background-color: white;
            cursor: pointer;
        }
        /* .show1{
            color: #1b1b1b;
        } */
        .show:hover{
            color:cyan;
        }
        .icon{
            display: block;
            color: white;
            position: absolute;
            right: 40px;
            line-height: 70px;
            font-size: 25px;
            cursor: pointer;
        }
        nav ul li a:hover{
           box-shadow: none; 
        }
        .show + a,ul{
        display: none;
        }
        [id^=btn]:checked + ul{
            display: block;
        }
    }
    * {box-sizing: border-box;}
    /* responsive part for navigation bar */
    /* second part responsive nav bar*/
    /* this is the flex box div */
    .container2{
        width: 100%;
        min-height:300px ;
        background-color:purple;
        /*add flexbox style*/
        display: flex;
        flex-direction: row;
        border: 1px solid white;
        justify-content: space-around;
        flex-flow: wrap;
    }
    .box2{
        width: 300px;
        border: 1px solid black;
        height: 300px;
        background:transparent;
        margin: 2px;
        position: relative;
        box-sizing: border-box;
        font-size: 50px;
    }
    #img2
    {
        display: block;
        width: 100%;
        height: 100%;
    }


    /* this is the flex box div */
    /* This is image hover effects */
    .overlay {
        position: relative;
        bottom: 0; 
        background: rgb(0, 0, 0);
        background:radial-gradient(rgba(1, 2, 3, 0.1),rgba(3, 4, 5, 0.9));  /* Black see-through */
        /* background: #466368;
        background: radial-gradient(#648880, #293f50);*/
        color: #f1f1f1;  
        width: 100%;
        transition: .5s ease-in-out;
        opacity:0;
        width: 300px;
        height: 300px;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
        top: -300px;
        float: unset;
        bottom: 0px;
      }
      .box2:hover .overlay {
        opacity: 5;
      }

    /* This is image hover effects */

    .welcome{
        border:1px solid #1b1b1b;
    }
    #welcomepara{
        margin-left: 0px;
    border: 1px solid red;
        background-color:purple;
        font-size: 40px;
        font-weight: lighter;
        font-family: 'Times New Roman', Times, serif;
        color: orange;
    }
    /* add responive media queries */
    @media screen and (max-width:800px){
        .box7para::before{
          text-align: center;
        }
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }
    }
    @media screen and (max-width:900px){

        .container7inside::before{
            content: "A";
            text-align: center;
             white-space: pre; 
        } 
        #block2{
            text-align: center;
        }
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }
    }
    @media screen and (max-width:1000px){    
        .container7inside::before{
            content: "A";
            text-align: center;
             white-space: pre; 
        } 
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }

    }
    @media screen and (max-width:600px){
        .container7inside{
            margin-left: 0px;
        }
        .box7para::before{
            text-align: center;
        }
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }
    }

//**and the javascript is**
   document.getElementById("_bar_Id_").onclick = function() {
    var x = document.getElementById("logo2");
    if (x.style.visibility === "hidden") {
    x.style.visibility = "visible";
    } else {
      x.style.visibility = "hidden";
      }
    }

And the link to website is to check
https://muhammad-bilal-7896.github.io/School-website/

Comments

Comment posted by omri klein

I could not find the “awesome” bar, are you sure it’s there? where is it?

Comment posted by bilalmohib

@omri klein Yes It is there just reduce your browser width and you will see it actually it is for responsiveness i.e the font awesome bar icon displays on mobile device width actually i.e 968px and the nav bar in it and display nav bar on click on it

Comment posted by bilalmohib

Just minimize the browser you will find it over the top of slideshow

Comment posted by JavaScript hide/show element

Does this answer your question?

Comment posted by muhammad-bilal-7896.github.io/SchoolWebsite

@Vega No my question is a bit different you can run the link to check and read the question

Comment posted by bilalmohib

I have tried your solution but its not working I have edited the code after applying yours please check the problem

Comment posted by omri klein

you should put the “

By

Leave a Reply

Your email address will not be published. Required fields are marked *