its supposed to show the original facts then use the button to switch between both fact pages but some of the css changes dont work and changing the image back to the original one doesnt work either
var par1 = $('.p1');
var par2 = $('.p2');
var par3 = $('.p3');
var button = $('button');
var picture = $('img')
var body = $('body')
button.on('click', showFacts);
button.on('click', hideFacts);
function showFacts () {
Header.text('Tree Facts');
par1.text('Trees can help to reduce stress');
par2.text("Trees are the longest living organisms on Earth, and never die of old age.");
par3.text('Planting trees can help reduce your energy costs.');
picture.attr('src', 'https://cdn.shopify.com/s/files/1/0212/1030/0480/products/91cnlaObmbL._SL1500.jpg?v=1627168523');
button.text('hide the secrets!');
Header.css('color', 'darkolivegreen');
button.css('background-color', 'darkolivegreen');
body.css('background-color', 'lightsalmon');
button.css('border', '2px', 'solid', 'black');
};
function hideFacts() {
Header.text('Puppy Facts');
par1.text('They spend 15–20 hours a day sleeping.');
par2.text('Puppies can be twins!');
par.text('Puppies become adults when they turn one.');
picture.attr('src', 'https://www.cbc.ca/kidscbc2/content/the_feed/fact-2-puppies-sleep-compressor.jpg');
button.text('show me the secrets!');
Header.css('color', 'mediumblue');
button.css('background-color', 'cornflowerblue');
body.css('background-color', 'white');
button.css('border', '2px', 'solid', 'mediumblue' );
}; ```
The problem is that you register two click event handlers on the same button.
button.on('click', showFacts);
button.on('click', hideFacts);
Each time the button gets clicked, they're both triggered, hideFacts will always be executed last.
You could instead register a single click event handler and execute either showFacts or hideFacts depending on the current state.