Display separate sections of an html page on a button click

Question

Good day,

I'm tring to display separately two sections (p1 and p2) of my html page. In other words, when I click on 1st button, I would like section "p1" to be displayed and section "p2" to be hidden, and conversely when I click on button p2, I would like only section "p2" to be visible.

So far, I am not very successful in my attempts.

Do you have any hints which would be of great help to progress ?

Many thanks for your time and best wishes

Here below is my html code:

<!DOCTYPE html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
    <script type="text/javascript" src="scripts/date_time.js"></script>
    <script type="text/javascript" src="scripts/demo.js"></script>
  </head>
  <body>        
  <div class="div_screen">
    <div class="div_screen_left_frame">
        <div class="div_screen_icon">
          <img src="assets/icons/logo_Domoos.png" alt ="" style="width:80px;height:58px;">   
        </div>
        <div class="div_screen_nav1">
          <ul id="menu">
            <button class="cupid-blue" href="#p1"> Display section 1 (p1)
            <button class="cupid-blue" href="#p2"> Display section 2 (p2)
          </ul>
        </div>
    </div>  
    <div class="div_screen_contents_frame">
    <div class="page" id="p1">
    <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span>    </section>  
    </div>
    <div class="page" id="p2">
    <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span>   </section>  
    </div>    </div>
    <div class="div_screen_up_frame">
      <div class="div_current_meteo_frame">
        <div class="div_current_meteo_icon">
          <img src="assets/meteo_icons/eclaircies-big.png" alt="" style="width:55px;height:55px;"> 
        </div>
        <div class="div_current_meteo_temperature">-23&deg;C</div>
        <div class="div_current_meteo_condition">Nuit avec averses de neige faible</div>
        <div class="div_sunrise_sunset">
          <img src="assets/icons/sun_icon.png" alt="" width="14" height="14">&#8593; 05:38 <img src="assets/icons/sun_icon.png" alt="" width="14" height="14">&#8595; 21:16
        </div>
          <div style="width:50px;height:50px;border:1px solid #000;"></div>
      </div>
      <div class="div_forecast_meteo_frame">
        <div class="div_forecast_meteo_day1">
          <div class="div_forecast_weekday">Vendredi</div>
          <div class="div_forecast_date">31.05.2020</div>
          <div class="div_forecast_icon">
            <img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
          </div>
          <div class="div_forecast_text">Nuit avec développement nuageux</div>
          <div class="div_forecast_temperature">24&deg;C | 15&deg;C</div>
        </div>
        <div class="div_forecast_meteo_day2">
          <div class="div_forecast_weekday">Samedi</div>
          <div class="div_forecast_date">99.99.9999</div>
          <div class="div_forecast_icon">
            <img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
          </div>
          <div class="div_forecast_text">Nuit avec averses de neige faible</div>
          <div class="div_forecast_temperature">-24&deg;C | -20&deg;C</div>
        </div>
        <div class="div_forecast_meteo_day3">
          <div class="div_forecast_weekday">Dimanche</div>
          <div class="div_forecast_date">77.77.7777</div>
          <div class="div_forecast_icon">
            <img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
          </div>
          <div class="div_forecast_text">Nuit avec averses de neige faible</div>
          <div class="div_forecast_temperature">-24&deg;C | -20&deg;C</div>
        </div>
      </div>
      <div class="div_screen_datetime">
        <div id="date">
          <script type="text/javascript">window.onload = getDate('date');</script>
        </div>
        <div id="time">
          <script type="text/javascript">window.onload = getTime('time');</script>
        </div>
      </div>
    </div>


    <div style="width:900px;height:540px;border:0px solid #ffaacc;"></div>
  </div>
  </body>
</html>

Not quite sure if the css might be helpful, but here it is :

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 19.0%;
padding: 2px;
}

/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}

.div_screen {
font-family:"Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 90%;
color: blue;
position: fixed;
top: -3;
left: -3;
width: 1005px;
height: 540 px;
border: 2px solid #de2be4;
}

.div_screen_datetime
{
position: absolute;
right: 1px;
top: 0;
width: 170px;
border: 1px solid red;
font-size: 120%;
text-align: right;
height: 95px; /*50*/
}

.div_screen_up_frame {
position: absolute;
left: 150px;
top: 1px;
width: 852px;
height:95px;
border: 1px solid blue;
}


.div_screen_left_frame {
position: absolute;
left: 1px;
top: 1px;
width: 146px;
height:536px;
border: 1px solid blue;
}

.div_screen_contents_frame {
position: absolute;
left: 150px;
top: 99px;
width: 852px;
height:438px;
border: 1px solid blue;
}

.div_screen_icon {
position: absolute;
left: 0px;
top: 0px;
width: 145px;
height: 95px;
border: 1px solid black;
}

.div_screen_nav1 {
position: absolute;
left: 0px;
top: 95px;
width: 145px;
height: 300px;
border: 1px solid black;
}

.div_screen_nav2 {
position: absolute;
left: 0px;
top: 398px;
width: 145px;
height: 137px;
border: 1px solid black;
}

.div_current_meteo_frame {
position: absolute;
left: 0px;
top: 0px;
width: 185px;
height:95px;
border: 1px solid black;
}

.div_sunrise_sunset {
position: absolute;
font-size: 75%;
left: 2px;
top: 72px;
}

.div_current_meteo_icon {
position: absolute;
left: -5px;
top: 1px;
width: 100px;
}

.div_current_meteo_temperature {
position: absolute;
font-size: 250%;
/*text-align: center;*/
left: 80px;
top: 0px;
color: black;
}

.div_current_meteo_condition {
position: absolute;
font-size: 75%;
/*text-align: center;*/
left: 2px;
top: 55px;
color: black;       
}

.div_forecast_meteo_frame {
position: absolute;
left: 186px;
top: 0px;
width: 492px;
height:95px;
border: 1px solid black;
}

.div_forecast_meteo_day1 {
position: absolute;
font-size: 95%;
left: 1px;
top: 1px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}

.div_forecast_meteo_day2 {
position: absolute;
font-size: 95%;
left: 1px;
top: 31px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}

.div_forecast_meteo_day3 {
position: absolute;
font-size: 95%;
left: 1px;
top: 61px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}

.div_forecast_weekday {
position: absolute;
font-size: 100%;
color: black;
left: 0px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}

.div_forecast_date {
position: absolute;
font-size: 100%;
color: black;
left: 65px;
top: 2px;
text-align: left;
border: 1px solid yellow;   
}

.div_forecast_icon {
position: absolute;
font-size: 100%;
color: black;
left: 138px;
text-align: left;
border: 1px solid yellow;   
}

.div_forecast_text {
position: absolute;
font-size: 100%;
color: black;
left: 165px;
top: 2px;
text-align: left;
border: 1px solid yellow;   
}

.div_forecast_temperature {
position: absolute;
font-size: 100%;
color: black;
right: 1px;
top: 2px;
text-align: right;
border: 1px solid yellow;
}

button.cupid-blue {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 140px;
height: 40px;
margin-top: 5px;
margin-bottom: 5px;
left: 5 px;

}

ul {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 10%;
  padding: 0;
  text-align: center;
 }

@jmm, Many thanks. Would you have some online examples that would help me ? Secondly, is javascript the only way to achieve this ? I'm not very familiar with JS — Laurent, May 30 '20 at 15:34
@ikiK, I trust you, provided you know exactly what to look for :/ — Laurent, May 30 '20 at 15:39
Yes, because the elements that you want to modify are not children of the element that dispatches the action. — jmm, May 30 '20 at 15:41

Atul Rajput · Accepted Answer · 2020-05-30T16:33:18.223

just find the clicked item related div and show it and hide the other one. I have created the logic, just use it in your code

$(document).ready(function(){
  $('#menu button').click(function(){
    var hrefId = $(this).attr('href');
    $('.div_screen_contents_frame .page').hide();
    $('.div_screen_contents_frame').find(hrefId).show();
  });
});

.page{display: none;}
.page.active {display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
            <button class="cupid-blue" href="#p1"> Display section 1 (p1)
            <button class="cupid-blue" href="#p2"> Display section 2 (p2)
          </ul>
        </div>
    </div>  
    <div class="div_screen_contents_frame">
    <div class="page active" id="p1">
    <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span>    </section>  
    </div>
    <div class="page" id="p2">
    <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span>   </section>  
    </div>

use below part as it is in your code, as you asked in Comment

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>$(document).ready(function(){

$('#menu button').click(function(){
   var hrefId = $(this).attr('href');
   $('.div_screen_contents_frame .page').hide();
   $('.div_screen_contents_frame').find(hrefId).show();
 });
});</script>

as per our Discussion I am adding a pure JS solution here. Check it.

function toggleDisplay(className, displayState){
    var elements = document.getElementsByClassName(className)
    for (var i = 0; i < elements.length; i++){
        elements[i].style.display = displayState;
    }
  }
  function toggle(){
    document.onclick = function(e) {
      if (e.target.tagName == 'BUTTON') {
        var href = e.target.getAttribute("href");
        toggleDisplay('page', 'none');
        document.getElementById(href).style.display = 'block';
      }
    }
  }

.page{display: none;}
.page.active {display: block;}

<ul id="menu">
        <button class="cupid-blue" href="p1" id="btnOne" onclick="toggle(this)"> Display section 1 (p1)</button>
        <button class="cupid-blue" href="p2" id="btnTwo" onclick="toggle(this)"> Display section 2 (p2)</button>
    </ul>
    </div>
    </div>
    <div class="div_screen_contents_frame">
        <div class="page active" id="p1">
            <section class="icon fa fa-bolt" id="pOne"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
        </div>
        <div class="page" id="p2">
            <section class="icon fa fa-bolt" id="pTwo"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
        </div>
    </div>

Welcome, if it really helped you, don't forget to upVote too :D — Atul Rajput, May 30 '20 at 15:42
Atut, me again, where am I supposed to copy the code starting with " [...] $(document).ready(function() -> should I insert that in a separate javascript file ? — Laurent, May 30 '20 at 15:46
put the above shown code in your code's bottom, I.e before body's closing tag(
), if you are already using jQuery then cut the script part from my code, which has jQuery CDN link, if not then use it as it is, check the edited answer — Atul Rajput, May 30 '20 at 15:53
@Atut, you really made my day, thanks a lot :-). I have a last question for you: In order to have a "clean" html, I would like to put all the code in an external javascript file, is there any way to achieve this ? — Laurent, May 30 '20 at 16:01
yeah Sure, that is the right way actually, so here is what you need to do. 1. Create the new JS file and put the $(document).ready()... part in that file and add the Script tag which has URl for jQuery in your HTML file's bottom, and one most important thing, call your custom js file below that jQuery script link .. That's all — Atul Rajput, May 30 '20 at 16:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214988/discussion-between-laurent-and-atul-rajput). — Laurent, May 30 '20 at 16:06

Display separate sections of an html page on a button click

1 Answers1