I found this pretty cute snippet for recipes card in Codepen to use within my university project, and I m trying to modify such that I can have multiple recipes in the same page.
At now I managed to have the containers open when clicked in each recipes, but I am struggling to find a solution for toggling between Ingredients and Preparations.. I am pretty new to programming and web development and I can't really figure out if it is something that can be handle just with Javascript, or perhaps I will need to modify also the HTML ..
Until now I came up with this function which is giving me the right innerHTML when I click in the tabs, but I have tried different things to make it switch between tabs and nothing worked .. I will appreciate any kind of help from you! Thanks
const recipeCardActions = document.querySelectorAll(".recipe-card__actions");
recipeCardActions.forEach((item, index) => {
const ingredientsTab = item.querySelector("#ingredientsTab");
const preparationsTab = item.querySelector("#preparationsTab");
ingredientsTab.addEventListener("click", () => {
console.log(ingredientsTab.innerHTML);
});
preparationsTab.addEventListener("click", () => {
console.log(preparationsTab.innerHTML);
});
});
const recipeCardCover = document.querySelectorAll(".recipe-card__cover");
const recipeCardInfo = document.getElementById(".recipe-card__info");
const recipeCardDuration = document.getElementById("recipe-card__duration");
const recipeCardServings = document.getElementById("recipe-card__servings");
const recipeCardContentContainer = document.querySelectorAll(
".recipe-card__content-container"
);
const ingredientsTab = document.getElementById("ingredientsTab");
const preparationsTab = document.getElementById("preparationsTab");
const ingredientsContent = document.getElementById(
"recipe-card__content--ingredients"
);
const preparationsContent = document.getElementById(
"recipe-card__content--preparations"
);
recipeCardCover.forEach((item, index) => {
item.addEventListener("click", () => {
const container = document.querySelectorAll(
".recipe-card__content-container"
);
item.classList.toggle("recipe-card__cover--open");
container[index].classList.toggle("recipe-card__content-container--open");
});
});
/////////////////////////////ACTIVE CLASS/////////////////////////////////
ingredientsTab.addEventListener("click", (e) => {
e.preventDefault();
ingredientsTab.classList.add("active");
preparationsTab.classList.remove("active");
ingredientsContent.classList.add("recipe-card__content--active");
preparationsContent.classList.remove("recipe-card__content--active");
});
preparationsTab.addEventListener("click", (e) => {
e.preventDefault();
ingredientsTab.classList.remove("active");
preparationsTab.classList.add("active");
ingredientsContent.classList.remove("recipe-card__content--active");
preparationsContent.classList.add("recipe-card__content--active");
});
.recipe-card {
border-radius: 15px;
display: flex;
}
.recipe-card__cover {
cursor: pointer;
background: #eee;
border-radius: 15px;
position: relative;
height: 500px;
width: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 30;
transition: transform 0.3s ease-in-out, border-radius 0.3s ease-in-out;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
}
.recipe-card__cover-details {
z-index: 20;
color: white;
height: 100%;
width: 100%;
position: relative;
}
.recipe-card__img {
display: flex;
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
overflow: hidden;
}
.recipe-card__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
transition: transform 0.3s ease-in;
}
.recipe-card__cover--open {
transform: translateX(-80%);
}
.recipe-card__cover:hover .recipe-card__img img {
transform: scale(1.1);
}
.recipe-card__servings,
.recipe-card__duration {
background: rgba(52, 73, 94, 0.8);
width: 60px;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 10px;
text-align: center;
font-size: 0.4em;
transform: translatex(-120%);
transition: transform 0.3s ease-in;
text-transform: uppercase;
}
.recipe-card__cover:hover .recipe-card__servings,
.recipe-card__cover:hover .recipe-card__duration {
transform: translatex(0);
}
.recipe-card__servings--show,
.recipe-card__duration--show {
transform: translatex(0);
}
.recipe-card__servings span,
.recipe-card__duration span {
display: block;
font-size: 3em;
}
.recipe-card__info {
position: absolute;
bottom: 0;
background: white;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 25%,
rgba(0, 0, 0, 0.6) 100%
);
padding: 0 20px;
transition: transform 0.3s ease-in;
transform: translateY(45%);
}
.recipe-card__cover:hover .recipe-card__info {
transform: translateY(0%);
}
.recipe-card__info--show {
transform: translateY(0%);
}
.recipe-card__title {
font-family: "Enriqueta", serif;
font-size: 1.2em;
}
.recipe-card__description {
font-size: 1.1em;
line-height: 1.3;
}
.recipe-card__content-container {
width: 300px;
height: 450px;
margin-top: 25px;
background: #f5f5f5;
position: absolute;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
transition: 0.3s ease-in-out;
border-radius: 15px;
overflow: hidden;
}
.recipe-card__content-container--open {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
transform: translateX(12%);
width: 500px;
}
.recipe-card__actions ul {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
height: 60px;
width: 100%;
align-items: center;
}
.recipe-card__actions li {
display: flex;
height: 60px;
width: 100%;
transition: background-color 0.2s ease;
align-items: center;
justify-content: center;
position: relative;
}
.recipe-card__actions li:hover {
background-color: #eee;
}
.recipe-card__actions a {
padding: 10px;
text-decoration: none;
color: #333;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s ease;
font-weight: 900;
}
.recipe-card__actions a:hover {
border-bottom: 2px solid #2c3e50;
}
.recipe-card__actions a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.recipe-card__actions a.active {
border-bottom: 2px solid #34495e;
}
.recipe-card__content {
display: none;
padding: 10px 20px;
height: 360px;
overflow-y: scroll;
}
.recipe-card__content ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.recipe-card__content ul span {
font-weight: 900;
background: #34495e;
color: white;
padding: 5px 3px;
}
.recipe-card__content li {
min-height: 30px;
display: flex;
align-items: center;
padding: 5px 3px;
line-height: 1.4;
}
.recipe-card__content li:nth-child(even) {
background: #eee;
}
.recipe-card__content--active {
display: block;
}
.preparation-steps {
counter-reset: section;
}
.preparation-steps li {
margin-left: 10px;
padding-left: 30px;
position: relative;
border-left: 3px solid rgba(52, 73, 94, 0.5);
}
.preparation-steps li::before {
content: "1";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -21px;
background: #34495e;
color: white;
border-radius: 50%;
height: 2em;
width: 2em;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #f5f5f5;
counter-increment: section;
content: counter(section);
}
<div class="recipe-card">
<div id="recipe-card__cover" class="recipe-card__cover">
<div class="recipe-card__img">
<img
src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=687&q=80"
alt="Blueberry French Toast"
/>
</div>
<div class="recipe-card__cover-details">
<div id="recipe-card__duration" class="recipe-card__duration">
<p><span>30</span>mins</p>
</div>
<div id="recipe-card__servings" class="recipe-card__servings">
<p><span>8</span>servings</p>
</div>
<div id="recipe-card__info" class="recipe-card__info">
<div class="recipe-card__title">
<h1>Blueberry French Toast</h1>
</div>
<div class="recipe-card__description">
<p>
Wonderful blueberry french toast recipe to serve for
your whole family!
</p>
</div>
</div>
</div>
</div>
<div
id="recipe-card__content-container"
class="recipe-card__content-container"
>
<div class="recipe-card__actions">
<ul>
<li>
<a id="ingredientsTab" href="#" class="active"
>Ingredients</a
>
</li>
<li><a id="preparationsTab" href="#">Preparation</a></li>
</ul>
</div>
<div
id="recipe-card__content--ingredients"
class="recipe-card__content recipe-card__content--active"
>
<ul>
<span>MAIN:</span>
<li>12 slices day-old white bread, crusts removed</li>
<li>2 packages (8 ounces each) cream cheese</li>
<li>1 cup fresh or frozen blueberries</li>
<li>12 large eggs, lightly beaten</li>
<li>2 cups 2% milk</li>
<li>1/3 cup maple syrup or honey</li>
</ul>
<ul>
<span>SAUCE:</span>
<li>1 cup sugar</li>
<li>2 tablespoons cornstarch</li>
<li>1 cup water</li>
<li>1 cup fresh or frozen blueberries</li>
<li>1 tablespoon butter</li>
</ul>
</div>
<div
id="recipe-card__content--preparations"
class="recipe-card__content"
>
<ul class="preparation-steps">
<li>
Cut bread into 1-in. cubes; place half in a greased
13x9-in. baking dish. Cut cream cheese into 1-in. cubes;
place over bread. Top with blueberries and remaining bread
cubes.
</li>
<li>
Whisk the eggs, milk and syrup in a large bowl. Pour over
bread mixture. Cover and refrigerate for 8 hours or
overnight.
</li>
<li>
Remove from the refrigerator 30 minutes before baking.
Cover and bake at 350° for 30 minutes. Uncover; bake 25-30
minutes longer or until a knife inserted in center comes
out clean.
</li>
<li>
Combine the sugar, water and cornstarch until smooth in a
small saucepan. Bring to a boil over medium heat; cook and
stir until thickened, 3 minutes. Stir in blueberries;
bring to a boil. Reduce heat and simmer until berries
burst, 8-10 minutes. Remove from heat; stir in butter.
Serve with French toast.
</li>
</ul>
</div>
</div>
<!-- Second Recipe -->
<div class="recipe-card">
<div id="recipe-card__cover" class="recipe-card__cover">
<div class="recipe-card__img">
<img
src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=687&q=80"
alt="Blueberry French Toast"
/>
</div>
<div class="recipe-card__cover-details">
<div id="recipe-card__duration" class="recipe-card__duration">
<p><span>30</span>mins</p>
</div>
<div id="recipe-card__servings" class="recipe-card__servings">
<p><span>8</span>servings</p>
</div>
<div id="recipe-card__info" class="recipe-card__info">
<div class="recipe-card__title">
<h1>Blueberry French Toast</h1>
</div>
<div class="recipe-card__description">
<p>
Wonderful blueberry french toast recipe to serve for
your whole family!
</p>
</div>
</div>
</div>
</div>
<div
id="recipe-card__content-container"
class="recipe-card__content-container"
>
<div class="recipe-card__actions">
<ul>
<li>
<a id="ingredientsTab" href="#" class="active"
>Ingredients</a
>
</li>
<li><a id="preparationsTab" href="#">Preparation</a></li>
</ul>
</div>
<div
id="recipe-card__content--ingredients"
class="recipe-card__content recipe-card__content--active"
>
<ul>
<span>MAIN:</span>
<li>12 slices day-old white bread, crusts removed</li>
<li>2 packages (8 ounces each) cream cheese</li>
<li>1 cup fresh or frozen blueberries</li>
<li>12 large eggs, lightly beaten</li>
<li>2 cups 2% milk</li>
<li>1/3 cup maple syrup or honey</li>
</ul>
<ul>
<span>SAUCE:</span>
<li>1 cup sugar</li>
<li>2 tablespoons cornstarch</li>
<li>1 cup water</li>
<li>1 cup fresh or frozen blueberries</li>
<li>1 tablespoon butter</li>
</ul>
</div>
<div
id="recipe-card__content--preparations"
class="recipe-card__content"
>
<ul class="preparation-steps">
<li>
Cut bread into 1-in. cubes; place half in a greased
13x9-in. baking dish. Cut cream cheese into 1-in. cubes;
place over bread. Top with blueberries and remaining bread
cubes.
</li>
<li>
Whisk the eggs, milk and syrup in a large bowl. Pour over
bread mixture. Cover and refrigerate for 8 hours or
overnight.
</li>
<li>
Remove from the refrigerator 30 minutes before baking.
Cover and bake at 350° for 30 minutes. Uncover; bake 25-30
minutes longer or until a knife inserted in center comes
out clean.
</li>
<li>
Combine the sugar, water and cornstarch until smooth in a
small saucepan. Bring to a boil over medium heat; cook and
stir until thickened, 3 minutes. Stir in blueberries;
bring to a boil. Reduce heat and simmer until berries
burst, 8-10 minutes. Remove from heat; stir in butter.
Serve with French toast.
</li>
</ul>
</div>
</div>
</div>
</div>
