I have 3 files for css, js, and php(which is more on html but i decided to put the php extension instead)
The project I'm trying to make is an interactive Menu that has a Page Flip action. I was able to find a reference in codepen. However, when I tried to apply it to my end, the animation and the text where not functioning the way I need it to be, although it works on codepen
The codes I used can also be find on the link i mentioned above. I just wanna ask how to properly call the external link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js and https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js on the menu.php file?
This is how I did it on sublimetext. I am not sure if it is just the positioning of my files. the result on what I did is that all the text are all centered and no page flip occurring. Thanks for the help
Menu.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sakurajima Menu</title>
<link href="css/styles2.css" rel="stylesheet">
<script src="js/main2.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/sakura-favicon.png"/>
</head>
<body>
<div class="container">
<div class="book-wrapper">
<div class="book-cover">
<img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
</div>
<div class="pages-container">
<div class="pages">
<div class="page-num-1">
<div class="pages-content">
<div class="pages-background"></div>
<div class="content-inner">
<h1>Chapter 1</h1>
<div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
</div>
</div>
</div>
<div class="page-num-2">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 2</h1>
<div class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? Fugit iste voluptatum atque voluptatibus totam! Nisi accusantium saepe hic. Aut nobis nesciunt mollitia error.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod natus, excepturi quae minus voluptatum cupiditate quia magnam eveniet ex, reiciendis voluptates ipsam iste laudantium!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
</div>
</div>
</div>
</div>
<div class="page-num-3">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 3</h1>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
</div>
</div>
</div>
</div>
<div class="page-num-4">
<div class="pages-content">
<div class="content-inner">
<h1>The End</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Put first the vendor libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/main2.js" type="text/javascript"></script>
Related
Well, what I need is so complex for me that I can't even explain what I want.
I have a main section, where I need this main section to scroll between the main sections.
Inside the first main section I have another section and I need it to scroll independently of the main section, i.e. only this section scrolls.
Can anyone help me with this?
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const allSection = document.getElementsByTagName("section");
const sections = [];
let count = 0;
for (let i = 0; i < allSection.length; i++) {
let sectionArr = document.getElementById(`section-${i + 1}`);
sections.push(sectionArr);
}
function next() {
prevBtn.classList.remove("disabled");
if (count < allSection.length - 1) {
sections[count].classList.add("d-none");
count++;
console.log(count);
sections[count].classList.remove("d-none");
}
if (count === allSection.length - 1) {
nextBtn.classList.add("disabled");
}
}
function prev() {
nextBtn.classList.remove("disabled");
if (count !== 0) {
sections[count].classList.add("d-none");
count--;
sections[count].classList.remove("d-none");
}
if (count === 0) {
prevBtn.classList.add("disabled");
}
}
#page-content {
width:100%;
display:flex;
justify-content:space-between;
}
#sect-one, #sect-two {
width:50%;
height: 500px;
background-color:red;
}
#media(max-width:768px) {
#page-content {
flex-direction: column;
}
#sect-one, #sect-two {
width:100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section, prev & next</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/7a83d58e46.js" crossorigin="anonymous"></script>
</head>
<body>
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<section id="section-1" class="container">
<main id='page-content'>
<section id='sect-one'>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis aut distinctio magni dolorem nobis illum
perferendis modi tempora inventore quis!</p>
</section>
<section id='sect-two'>
<section id="section-6" class="container">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 1</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis aut distinctio magni dolorem nobis illum
perferendis modi tempora inventore quis!</p>
</div>
</section>
<section id="section-7" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 2</h2>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iure iste fugit dolor dicta voluptate
magnam perferendis, beatae, ipsam id placeat magni voluptatem accusamus animi eum officiis atque hic
temporibus.</p>
</div>
</section>
<section id="section-8" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 3</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-9" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 4</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-10" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 5</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
</section>
</main>
</section>
<section id="section-2" class="container d-none">
<h2>Section 2</h2>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iure iste fugit dolor dicta voluptate
magnam perferendis, beatae, ipsam id placeat magni voluptatem accusamus animi eum officiis atque hic
temporibus.</p>
</div>
</section>
<section id="section-3" class="container d-none">
<h2>Section 3</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-4" class="container d-none">
<h2>Section 4</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-5" class="container d-none">
<h2>Section 5</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Each <p> are hidden on initial load and I want to click on the <h3> then want the p-tag to show using Javascript.
I have a section in my HTML that looks as follow
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
My question is how do you reference the following div (or in this case p-tag) given the H3 you pressed?
If you press the H3 under #history then only that p-tag must show and the same with the other divs. But how do you do this in Javascript without duplicating code with different id's or classes.
My approach avoid the use of inline JS inside HTML, which is a bad practice.
Select all <h3> that are clickable and should open the <p> tags, then add the listener to them all.
Now, all you need is the function using this, that refers to the clicked h3, get it's sibling element, check if it is displaying or not, and do the toggle.
See below code
openFunction = function(ev) {
let pTagElem = this.nextElementSibling
if (pTagElem.style.display == "inline") {
pTagElem.style.display = "none"
} else {
pTagElem.style.display = "inline"
}
}
//select all <h3> that should be clickable (inside bio-sections divs)
let h3s = document.querySelectorAll("#bio-sections div h3")
//add the listener to them all
for (let h3 of h3s) {
h3.onclick = openFunction
}
#bio-sections div p {
display: none
}
#bio-sections div h3 {
cursor: pointer
}
<div id="bio-sections">
<div id="history">
<h3>My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
you can use javascript parameters like this, and move the id into the p tag
<div>
<h3 onclick="openFunction('history')">My History</h3>
<p id="history">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<script>
function openFunction(id) {
document.getElementById(id).show()
}
</script>
You can use closest() and delegation.
const container = document.querySelector("#bio-sections");
container.addEventListener("click", function (event) {
const parentSectionDiv = event.target.closest(".section");
if (parentSectionDiv !== null) {
parentSectionDiv.querySelector("p").classList.remove("hidden");
}
});
.hidden {
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<title>Sign in & Sign up Form</title>
</head>
<body>
<div id="bio-sections">
<div id="history" class="section">
<h3>My History</h3>
<p class="hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias
hic officia dolor quidem maiores quasi architecto veritatis obcaecati
debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum
quae!
</p>
</div>
<div id="schooling" class="section">
<h3>My Schooling</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure
distinctio voluptatum non quia maxime numquam amet eum at, quo ut
iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.
</p>
</div>
<div id="work" class="section">
<h3>My Work experience</h3>
<p class="hidden">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore
porro natus voluptates nam, consectetur corporis vitae eius hic sed ea
earum.
</p>
</div>
<div id="hobbies" class="section">
<h3>My Hobbies</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
perspiciatis ipsam suscipit voluptas ab distinctio a doloribus,
dolorem officia iure nemo qui incidunt soluta dolores ratione saepe.
In, mollitia! Voluptatem!
</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
It depends a bit on how stable your HTML is, but if you are confident it remains like that you don't need to change it and can on the click get the p element.
There's several ways of doing this. This snippet gets the common parent and the first p element in it.
function openFunction() {
console.log(event.target);
console.log(event.target.parentElement.querySelector('p:first-of-type'));
}
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
I was wondering if there is a way to swap the content of a html page with a nice fade in fade out effect using JS or jQuery.
In the HTML code I have below I cant to be able to swap out the section class="inner-wrapper" for some new content.
Would be great if you could help me out. :)
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>
Edit:
sorry for the bad post :P
This is what I would like to swap it for when i CLICK on one of the one-fourth divs
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper2">
<article id="one-two">
<h2>Recept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sit quas quam accusamus, quia facilis illo omnis repudiandae distinctio architecto sed, deleniti ducimus mollitia sequi repellendus. Distinctio rerum maiores rem.</p>
</article>
<aside id="tablet2">
<hr>
<img src="img/pannkakor.jpg" alt="">
</aside>
</section>
You can use fadeOut and fadein for this. fadeout/fadeIn also provide a callback function which will be fired once action is completed.
Read here
http://api.jquery.com/fadein/
and
http://api.jquery.com/fadeout/
$(".inner-wrapper").fadeOut( 3000, function() {
$(this).html("<div>Hello</div>");
$(".inner-wrapper").fadeIn(3000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>
The effect i got right now, it's shows the div paragraph . But when I add another div it's like all div shows paragraph together . How to control this by clicking 1 at the time?
Your help really appreciate.
HTML
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
JS
$('.open').on('click',function(event){
$('.ranch').toggle();
});
DEMO
You are using $('.ranch').toggle(); so you are selecting all paragraphs with class ranch and thus all paragraph are toggled when you click on it. A quick fix will be changing the line to $(this).siblings('.ranch').toggle();
The final JavaScript will be
$('.open').on('click',function(event){
$(this).siblings('.ranch').toggle();
});
JSBin: http://jsbin.com/fiwosigike/1/edit?html,css,js,output
You need to handle the button within each div separately
$('.open').on('click',function(event){
$(this).next('p').toggle();
});
This will do it. You have to use this to toggle only one item.
$('.open').on('click',function(event){
event.preventDefault();
$(this).next('.ranch').toggle();
});
try this.
$( ".open" ).click(function() {
$(this).next(".ranch").slideToggle( "slow", function() {
// Animation complete.
});
});
.content{
width:400px;
background-color:orange
}
.ranch{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
</body>
</html>
I wanted to create a testimonial section on my website to look something like this
Ideal concept
I was hoping to use only html and css, but sadly I was having some trouble with the logic for that.
While looking around, I stumbled on foundation. Felt like it would really help, so I rewrote my code with foundation and decided to use the tabs functionality.
I used
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Testimonials | Page</title>
<link rel="stylesheet" href="../css/foundation.min.css">
<link rel="stylesheet" href="../css/additional.css">
<script src="../js/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</head>
<div class="row">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="column large-8 large-offset-2 end testimonialBox">
<blockquote class="tabs-panel is-active large-8 column medium-offset-2 text-center plusclass end" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cum autem corporis vero voluptatum molestias reiciendis, nostrum necessitatibus nesciunt, delectus repellat tempora sint, in architecto. Reprehenderit eveniet molestiae nesciunt dolor ipsam deleniti voluptatibus maxime sequi a ullam nihil, ex dicta soluta.<cite>Famous Guy 1</cite></blockquote>
<blockquote class="tabs-panel large-8 column medium-offset-2 text-center plusclass end" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim tempora tempore quaerat perferendis, ab a earum, neque quis odio amet error ipsum sint nihil unde similique illum. Facere iure magnam aliquam doloremque, hic velit omnis.<cite>Famous Guy 2</cite></blockquote>
</div>
</div>
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
</ul>
But using that, all I got was
this
the first blockquote and the 2 tabs, and If I click on Tab2, it would not show the second blockquote. It would do absolutely nothing.
Cicking on Tab1 would jerk the page to the top of the Blockquote 1.
Any idea how to get this to work?
You have problem with your javascript syntax.
It should look like this
<script type="text/javascript">
$(document).foundation();
</script>
and not like this
<script type="text/javascript">
<script>
$(document).foundation();
</script>
You're seeing the weird behaviour because the initialization call is happening before your content is rendered.
You need to move $(document).foundation() after your content (suitably at the bottom of the body) so that the tabs are properly initialized.
Also, I don't know if it was a copy error, but you're missing a closing div tag. Your updated html would then be:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testimonials | Page</title>
<link rel="stylesheet" href="../css/foundation.min.css">
<link rel="stylesheet" href="../css/additional.css">
<script src="../js/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
</head>
<div class="row">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="column large-8 large-offset-2 end testimonialBox">
<blockquote class="tabs-panel is-active large-8 column medium-offset-2 text-center plusclass end" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cum autem corporis vero voluptatum molestias reiciendis, nostrum necessitatibus nesciunt, delectus repellat tempora sint, in architecto. Reprehenderit eveniet molestiae nesciunt
dolor ipsam deleniti voluptatibus maxime sequi a ullam nihil, ex dicta soluta.<cite>Famous Guy 1</cite></blockquote>
<blockquote class="tabs-panel large-8 column medium-offset-2 text-center plusclass end" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim tempora tempore quaerat perferendis, ab a earum, neque quis odio amet error ipsum sint nihil unde similique illum. Facere iure magnam aliquam doloremque, hic velit omnis.<cite>Famous Guy 2</cite></blockquote>
</div>
</div>
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
</ul>
</div>
<script type="text/javascript">
$(document).foundation();
</script>