Homework SourseUSING JAVASCRIPTJQUERY PLEASE COMPLETE THE QUESTION BELOW Ad
USING JAVASCRIPT/JQUERY PLEASE COMPLETE THE QUESTION BELOW:
Add one button to the page that will allow the user to check on future events in the area. The button label should read \"Future Events\" when the page is showing the 2017 events. When the user clicks on the button, to show the 2018 events, the button name will change to \"Current Events\" to allow the user to go back to the 2017 events. Once back to the 2017 events, the button name will change back to \"Future Events\". When the user clicks on the button name \"Future Events\" replace the current list of events being displayed with the new ones that are supplied in the HTML file (included with the assignment link in Blackboard.) The new list should be displayed with just the name of the event as the current list is. When the user clicks on the name of one of the future events, the details of that event should be seen. Just like you did for the current events in the previous assignment. When the user clicks on \"Current Events\" button then go back to the 2017 events. All other processing required in the previous assignments should remain. There should only be one list of events being displayed at one time. When moving this completed project to the server make sure to include all of the files.Solution
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Example of jQuery Show Hide Effects</title>
<script src=\"https://code.jquery.com/jquery-1.11.3.min.js\"></script>
<style type=\"text/css\">
p{
padding: 15px;
background: #F0E68C;
}
</style>
<script type=\"text/javascript\">
$(document).ready(function(){
// Hide displayed paragraphs
$(\".hide-btn\").click(function(){
$(\"p\").hide();
});
// Show hidden paragraphs
$(\".show-btn\").click(function(){
$(\"p\").show();
});
});
</script>
</head>
<body>
<button type=\"button\" class=\"hide-btn\">Hide future events</button>
<button type=\"button\" class=\"show-btn\">current events</button>
<p>future events in 2017</p>
<p>current events in 2018</p>
</body>
</html>
