Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Federico Lemaire
8,423 PointsHi everyone! I'm looking for some help with Javascript
Hi there! I'll appreciate some help from you. I have a task to do and I can't find the way to do it. I need to write a javascript function with a bootstrap card inside of it, so when the html page is loaded, you can click a button and the button call the function and the function show the card. I leave the html code in here, so if anybody can help me with this I'll be so much grateful!
<div class="card-group"> <div class="card"> <img src="img/pdel.jpg" class="card-img-top" alt="..."> <div id="borde" class="card-body border-primary"> <h3 class="card-title">Sede Square</h3> <h5>Próximos Torneos</h5> <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam omnis ea ducimus minus ullam ipsum mollitia fuga vero molestias vel, quis similique, exercitationem rem, doloremque debitis laborum quam nihil consectetur..</p>
</div>
</div>
</div>
2 Answers
Ross King
20,704 PointsHopefully this assists you with your page.
I have included everything in one file but if you need some tips on how to use JavaScript in other files, please let me know.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>My Card Toggle App</title>
</head>
<body>
<!-- Button to toggle the card -->
<button onclick="toggleCard(event);">Toggle Card</button>
<!-- Start Your Card -->
<div class="card-group">
<div class="card"> <img src="img/pdel.jpg" class="card-img-top" alt="...">
<div id="borde" class="card-body border-primary">
<h3 class="card-title">Sede Square</h3>
<h5>Próximos Torneos</h5>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam omnis ea ducimus minus
ullam
ipsum mollitia fuga vero molestias vel, quis similique, exercitationem rem, doloremque debitis laborum quam
nihil consectetur..</p>
</div>
</div>
</div>
<!-- Finish Your Card -->
<script>
// Function expression to show or hide the card
const toggleCard = (event) => {
// Prevent default (page refresh)
event.preventDefault();
// Get the card element
const element = document.querySelector(".card-group");
// Check if the card is displayed
const isDisplayed = element.style.display !== "none";
// If displayed is true
if (isDisplayed) {
// Hide the card
element.style.display = "none";
} else {
// If not displayed, show the card
element.style.display = "block";
}
}
</script>
</body>
</html>
Federico Lemaire
8,423 PointsRoss, thank you so so much! I was getting crazy, i'm not to good in js, everything I tried didn't work and I couldn't find information on internet, everything I found was like have to display a h1 and thing like that. I'm very grateful for your help, thanks a lot once again!
Ross King
20,704 PointsHappy to help Federico!