Jquery Question posted in
The official Jquery Api Documentation can be found here.

Hide elements with jquery

I would like to hide individual element blocks that are identified by id`s.

I have used a jquery function to do this.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name=”apple-mobile-web-app-capable” content=”yes “>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <script>

    function changeMenu(menu){
        $('#Slide_home').css({'display':'none'});
        $('#Slide_sub01').css({'display':'none'});
        $('#Slide_sub02').css({'display':'none'});  
        $('#Slide_'+menu).css({'display':'block'});
        }

    </script>

    <style>
    body { 
        margin: 0px; 
        padding: 0px; 
        background-color: rgb(53, 61, 64);  
        color: rgb(255, 255, 255); 
        height: 100%; 
        overflow-x: hidden; 
    } 

    #Menu {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 100px;
        background-color: rgb(0, 0, 0);
        
        }
        
    .ButtonWrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    }      
        
    .ButtonWrapper > div {
    margin-left: 50px;
    margin-top: 10px;  
    }
    </style>
      

</head>


<body>

<div id="Slide_home"> 

home
            
</div>

<div id="Slide_sub01">

01

</div>

<div id="Slide_sub02"> 

02

</div>

<div id="Menu">          
    <div class="ButtonWrapper">
        <div>
            <img class="" style="cursor:pointer" onClick="changeMenu('home');" src="01.png" alt="home"/>
        </div>

        <div>
            <img class="" style="cursor:pointer" onClick="changeMenu('sub01');" src="02.png" alt="sub_01"/>
        </div>

        <div>
            <img class="" style="cursor:pointer" onClick="changeMenu('sub02');" src="03.png" alt="sub_02"/>
        </div>
    </div>
</div>
                         
</body>
</html>

In principle the function works, when I press a button the corresponding other elements are hidden. But at the beginning all elements are visible. How can I display only the elements for home at the beginning?

Best regards
Jens

Tags:

2

Answers


  1. 0

    Add the following statements to your CSS:

    #Slide_sub01,#Slide_sub02{
  display:none
}
    Login or Signup to reply.
  2. 0

    Wrap the slides into a div and hide with CSS, add active class to the first slide and display this class as a block:

    .slides>* {
    display: none;
}

.slides>*.active {
    display: block;
}

    You can add the active class with JS:

      $('.slides >*:first-child, .ButtonWrapper >*:first-child').addClass('active');

    Here you can see that we can easily mark active state for the buttons too.

    Rewrite your show/hide code so you fully use jQuery event delegation. That way you don’t need any element IDs and can add as many slides as you want:

    $(() => {

  $('.slides >*:first-child, .ButtonWrapper >*:first-child').addClass('active');

  $('.ButtonWrapper').on('click', 'img', e => {
    const idx = $(e.target).parent().index();
    $('.slides, .ButtonWrapper').children().removeClass('active');
    $(`.slides >*:eq(${idx}), .ButtonWrapper >*:eq(${idx})`).addClass('active');
  });

});
    body {
    margin: 0px;
    padding: 0px;
    background-color: rgb(53, 61, 64);
    color: rgb(255, 255, 255);
    height: 100%;
    overflow-x: hidden;
}

#Menu {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 100px;
    background-color: rgb(0, 0, 0);

}

.ButtonWrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.ButtonWrapper>div {
    margin-left: 50px;
    margin-top: 10px;
    padding:5px 10px;
    border-radius: 4px;
    cursor:pointer;
}
.ButtonWrapper>div.active{
  background: #555;
}

.slides>* {
    display: none;
}

.slides>*.active {
    display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="slides">

<div class="active"> 

home
            
</div>

<div>

01

</div>

<div> 

02

</div>
</div>

<div id="Menu">          
    <div class="ButtonWrapper">
        <div >
            <img src="01.png" alt="home"/>
        </div>

        <div>
            <img src="02.png" alt="sub_01"/>
        </div>

        <div>
            <img src="03.png" alt="sub_02"/>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search