Yagayente Yagayente - 3 months ago 7
Javascript Question

How to load the first content of the menu?

I am making a website for a festival. The festival program is divide in three days, so I made 3 button to load the content of each days apart.



I'd like the first day to display directly when I load the website. How can I do ?

How can I change the button design, so that users could understand that it is loaded ?


<script type="text/javascript">
$(document).ready(function () {
$('.btn a').on('click', function(){
var btnindex = $(this).index();
$('.pgf .pgfone').siblings('.pgfone').css({'display':'none'});
$('.pgf .pgfone').eq(btnindex).css({'display':'block'});
});
});
</script>

<div class="btn" id="menu">
<a class="learn-more">JOUR 1</a>
<a class="learn-more">JOUR 2</a>
<a class="learn-more">JOUR 3</a>
</div>

<div class="pgf">

<div class="pgfone" style="display: none;"><?php include('dayone.php'); ?></div>
<div class="pgfone" style="display: none;"><?php include('daytwo.php'); ?> </div>
<div class="pgfone" style="display: none;"><?php include('daythree.php'); ?></div>

</div>

Answer

You can do it removing one of your styles

<div class="pgfone"><?php include('dayone.php'); ?></div>
<div class="pgfone" style="display: none;"><?php include('daytwo.php'); ?></div>
<div class="pgfone" style="display: none;"><?php include('daythree.php'); ?></div>

(P.S:) regarding the above my suggestion is to not use inline styles, but rather CSS:

/* FIRST REMOVE ANY INLINE STYLES AND DO: */

.pgfone + .pgfone{ display:none; } /* hide all but first one */

or using jQuery

$(".pgfone").eq(0).show();

Here's a demo with the required button styling:

$(document).ready(function () {
  
  var $learnBtns = $('.learn-more');
  
  $learnBtns.on('click', function() {
    var btnindex = $(this).index();
    $learnBtns.removeClass("active").eq(btnindex).addClass("active");
    $('.pgfone').hide().eq(btnindex).show();
  });
  
});
.pgfone + .pgfone{ display: none; }
.active{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn" id="menu">
  <a class="learn-more active">JOUR 1</a>
  <a class="learn-more">JOUR 2</a>
  <a class="learn-more">JOUR 3</a>
</div>

<div class="pgf">
  <div class="pgfone">ONE</div>
  <div class="pgfone">TWO</div>
  <div class="pgfone">THREE</div>
</div>