What is the proper way to display the initial content of the menu?

Question

What is the proper way to display the initial content of the menu?

I am currently working on a website design for an upcoming festival. The festival spans over three days, so I have created buttons to navigate and load the content for each day separately.

Is there a way for me to make the content for the first day display automatically when the website is loaded?

Also, how can I modify the design of the buttons to indicate to users that the content has been successfully 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">DAY 1</a>
        <a class="learn-more">DAY 2</a>
        <a class="learn-more">DAY 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>

javascript html css

Answer 1

Answer №1

If you want to achieve this, try 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:) In relation to the above, I recommend avoiding inline styles and using CSS instead:

/* START BY REMOVING INLINE STYLES AND ADD THIS TO YOUR CSS: */

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

You could also accomplish this with jQuery:

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

Check out this demo featuring the necessary 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">DAY 1</a>
  <a class="learn-more">DAY 2</a>
  <a class="learn-more">DAY 3</a>
</div>

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

Answer 2

If you want to achieve this, try 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:) In relation to the above, I recommend avoiding inline styles and using CSS instead:

/* START BY REMOVING INLINE STYLES AND ADD THIS TO YOUR CSS: */

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

You could also accomplish this with jQuery:

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

Check out this demo featuring the necessary 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">DAY 1</a>
  <a class="learn-more">DAY 2</a>
  <a class="learn-more">DAY 3</a>
</div>

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

Answer 3

Answer №2

Upon reviewing your website, I have come up with a solution for you.

To begin, add the following CSS rule to your page:

a.learn-more.inactive{
    background-color: gray;
    color: black;
    pointer-events:none;
}

In your HTML, make sure to use the data attribute to store the dates when these buttons should be active. Initially, set all buttons to inactive:

<div class="btn" id="menu">
    <a class="learn-more inactive" data-Date="3">DAY 1</a>
    <a class="learn-more inactive" data-Date="4">DAY 2</a>
    <a class="learn-more inactive" data-Date="5">DAY 3</a>
</div>

Then, utilize jQuery to determine the current day and toggle the active state of the buttons accordingly:

 var date = new Date();
 var currentDay = date.getDay(); 

 $('a.learn-more[data-Date="'+currentDay +'"]').removeClass('inactive');

This solution is dynamic, meaning you won't need to manually adjust the code each day to toggle your buttons. The script will automatically determine the current date and activate the appropriate button

. This way, you can focus on enjoying the festival instead of constantly tweaking the code :)

Answer 4

Upon reviewing your website, I have come up with a solution for you.

To begin, add the following CSS rule to your page:

a.learn-more.inactive{
    background-color: gray;
    color: black;
    pointer-events:none;
}

In your HTML, make sure to use the data attribute to store the dates when these buttons should be active. Initially, set all buttons to inactive:

<div class="btn" id="menu">
    <a class="learn-more inactive" data-Date="3">DAY 1</a>
    <a class="learn-more inactive" data-Date="4">DAY 2</a>
    <a class="learn-more inactive" data-Date="5">DAY 3</a>
</div>

Then, utilize jQuery to determine the current day and toggle the active state of the buttons accordingly:

 var date = new Date();
 var currentDay = date.getDay(); 

 $('a.learn-more[data-Date="'+currentDay +'"]').removeClass('inactive');

This solution is dynamic, meaning you won't need to manually adjust the code each day to toggle your buttons. The script will automatically determine the current date and activate the appropriate button

. This way, you can focus on enjoying the festival instead of constantly tweaking the code :)

What is the proper way to display the initial content of the menu?

Answer №1

Answer №2

Similar questions

Creating a duplicate of a Flex object in HTML without the need to reinitialize

Utilizing the power of JSF ajax with Bootstrap's data-toggle feature for radio buttons

How can strings of dates be arranged in MM/DD/YYYY order?

The Angular route functions flawlessly in the development environment, but encounters issues when deployed to

How can I display a button (hyperlink) on a new line using CSS or jQuery?

Is it possible to select options in AngularJS based on certain criteria?

Enhancing React Native experience by dynamically editing array elements

Placing an item inside the container without exceeding its vertical limit

Sending data using formData across multiple levels of a model in Angular

What is the best way to ensure that my grid remains contained within its designated area?

The animation in an AngularJS directive only functions properly when utilizing $timeout

Exploring the differences between JavaScript destructuring and assignment

interactive vuetify navigation trail elements

Basic HTML Audio Player Featuring Several Customizable Variables

Effective methods for importing components in VueJS 2.0

A guide on utilizing the javascript function to toggle the checkbox in each row of a gridview

Is it possible to use a Jasmine spy on a fresh instance?

Steps for incorporating events on Jquery UI button

Tips for making a circle and a bar overlap using CSS

Dealing with jQuery's scrollTop viewport problem: Adding a personalized value to position().top