Like button not working from article 2
Note: Like button works well for Article 1.
Article 2 like button is not toggled.
I am using toggleClass to toogle fontawesome icon.
The code is given below.
Please help me to solve this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Like Button</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style type="text/css">
.well{
background-color: white;
}
body{
background-color: #f7f7f7;
}
.love{
font-size: 20px ! important;
}
.love:hover{
cursor: pointer;
}
.fa-heart-o{
color: red;
}
.fa-heart{
color: red;
}
</style>
</head>
<body>
<div class="container">
<h3>
Like button not working from Artical 2
</h3>
<div class="well"><h4>Artical 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, qui aspernatur accusantium! Molestiae, cum cupiditate nam optio dignissimos magnam velit, perspiciatis amet qui aut nobis, quisquam, laudantium vitae eos ipsam.</p>
<hr>
<span id="love" class="love"><i class="fa fa-heart-o" aria-hidden="true"></i> Like</span>
</div>
<div class="well"><h4>Artical 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, qui aspernatur accusantium! Molestiae, cum cupiditate nam optio dignissimos magnam velit, perspiciatis amet qui aut nobis, quisquam, laudantium vitae eos ipsam.</p>
<hr>
<span id="love" class="love"><i class="fa fa-heart-o" aria-hidden="true"></i> Like</span></div>
<div class="well"><h4>Artical 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, qui aspernatur accusantium! Molestiae, cum cupiditate nam optio dignissimos magnam velit, perspiciatis amet qui aut nobis, quisquam, laudantium vitae eos ipsam.</p>
<hr>
<span id="love" class="love"><i class="fa fa-heart-o" aria-hidden="true"></i> Like</span></div>
<div class="well"><h4>Artical 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, qui aspernatur accusantium! Mo2estiae, cum cupiditate nam optio dignissimos magnam velit, perspiciatis amet qui aut nobis, quisquam, laudantium vitae eos ipsam.</p>
<hr>
<span id="love" class="love"><i class="fa fa-heart-o" aria-hidden="true"></i> Like</span></div>
<div class="well"><h4>Artical 5</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, qui aspernatur accusantium! Mo2estiae, cum cupiditate nam optio dignissimos magnam velit, perspiciatis amet qui aut nobis, quisquam, laudantium vitae eos ipsam.</p>
<hr>
<span id="love" class="love"><i class="fa fa-heart-o" aria-hidden="true"></i> Like</span></div>
</div>
<!-- jQuery (necessary f2r Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#love").click(function(){
$(this).find('i').toggleClass('fa-heart-o fa-heart');
});
});
</script>
</body>
</html>
Just a little change in your script
Use class and not id and it works fine
<script type="text/javascript">
$(document).ready(function(){
$(".love").click(function(){
$(this).find('i').toggleClass('fa-heart-o fa-heart');
});
});
</script>
Use $(document).on("click", "#love", function() {
instead of $("#love").click(function(){. It is working fine for all button's click event.
After this it will look like this
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#love", function() {
$(this).find('i').toggleClass('fa-heart-o fa-heart');
});
});
</script>
I am attaching screenshot of working output.PFA
Related
I would like to ask if on how to change my background when landing on a page. This is what it should like when the user tries to attempt to go on a page that needs to have an active session.
However, I want to hide the background. I want to show only the sweet alert pop up.
this is my page file.
index.php
<?php
include 'includes/connection.php';
if(!isset($_SESSION['student_id'])){
echo '<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>';
echo '<script type="text/javascript">';
echo 'setTimeout(function () {
swal({
title: "Access Failed",
text: "You are not yet logged in! Redirecting to Login...",
icon: "warning",
button: false,
timer: 2000
}).then(function(result) {
window.location = "Login.php?login=notactive";
});';
echo '}, 300);</script>';
// echo "<script>alert('You are not logged in!'); location.href='Login.php';</script>";
}
else{
$expire = 365*24*3600; // We choose a one year duration
setcookie(session_name(),session_id(),time()+$expire);
// echo "<script>alert('You are already Logged in!'); location.href='Home.php';</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repository Home</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="files/Images/logoapp.png">
<link rel="stylesheet" href="css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body id="panel">
<!-- Navbar Header -->
<nav class="navbar fixed-top navbar-expand-sm navbar-custom">
<img src="#" class="img-responsive" width="35" height="35"> | Repo </img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" role="button" ><i class="fa fa-bars" aria-hidden="true" style="font-size: 25px; margin: 0 auto;"></i></span>
</button>
<div id="navbarmenu" class="collapse navbar-collapse">
<ul class="navbar-nav justify-content-center" style="width: 100%">
<li class="nav-item active px-3">
<i class="fas fa-home"></i> Home
</li>
<ul class="nav navbar-nav">
<li class="nav-item dropdown px-3">
<i class="fas fa-laptop"></i> Research Repository
</li>
</ul>
<!-- <li id="irene"class="nav-item px-3">
Repository Management
</li> -->
<li id="irene"class="nav-item px-3">
</i> Request Form Management
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item dropdown px-3 mr-3">
<a class="nav-link text-nowrap" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i> <?php include 'helper/current_user.php'; ?>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#"><i class="fas fa-user-cog"></i> Edit Profile</a>
<a class="dropdown-item" href="#"><i class="fas fa-user-lock"></i> Edit Password</a>
<a class="dropdown-item" href="logout_student.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-sm" style="padding-top: 100px;">
<div class="container-sm text-center">
<div class="col-sm">
<span id="HeaderBanner"> EMPOWERING WHAT'S NEXT </span>
</div>
</div>
<div class="container-fluid" style="height: auto;width: 100%;">
<div class="row">
<div id="IntroductionParagraph" class="col-sm" style="margin-top: 50px;">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia at aspernatur veniam odit autem, earum explicabo maxime facilis molestiae hic quidem. Laboriosam dolores accusantium consequuntur, odio nulla in deserunt necessitatibus?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum ducimus laudantium labore corporis voluptatem distinctio est praesentium ex. Sed est excepturi quidem labore blanditiis error voluptatibus facilis ipsum nemo consequatur?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, totam alias voluptatum aperiam libero ipsa voluptatem perspiciatis. Quas doloremque dolore reiciendis tenetur accusantium ullam corporis adipisci natus officiis non?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, repudiandae sint consectetur eius nostrum exercitationem quidem magnam ratione obcaecati maiores iure voluptatum laudantium minus nulla illo. Perferendis eligendi nam aspernatur.
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime.
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime.
</p>
</div>
<div class="col-sm">
<img src="https://i.ibb.co/mbPvK7Q/women-inoff.png" class="img-responsive" style="width: 100%; height: auto;">
</div>
</div>
</div>
</div>
<!-- #START# -----------ADDING OF MODAL ------------------# -->
<!-- Large modal -->
<script type="text/javascript" src="./js/responsive_modal.js">
</script>
<!-- #END# -------------ADDING OF MODAL ------------------# -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body>
</html>
Thank you so much.
You have to add the following CSS
<style type="text/css">
.swal-overlay {
background-color: rgba(0,0,0, 1);
}
</style>
Also, set the following options to prevent closing the modal on click or Esc key press.
swal({
closeOnClickOutside: false,
closeOnEsc: false,
title: "Access Failed",
.... rest of your code
Without the options closeOnClickOutside: false and closeOnEsc: false, The page will be visible again if the user clicks outside the modal window (Sweet Alert) or press the Esc key.
By the way, I'd recommend using a PHP code checking for the active session (whether logged in or not) and redirect the user, rather than using the Javascript). Anyone with javascript disabled on their browser still can view the page content.
Change the .swal-overlay class background-color property value
from
background-color: rgba(0,0,0,.4);
to background-color: rgba(0,0,0,1);
.swal-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 0;
overflow-y: auto;
background-color: rgba(0,0,0,1);
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity .3s;
}
background color should be set while initializing the sweetalert
$(".swal-overlay").css({"background-color":rgba(0, 0, 0, 1);});
https://stackoverflow.com/a/52143162/1351883
I've been working on a project in Laravel, I used Materialize as a front-end framework !
My problem is in Materialize.js file and jQuery-3.3.1.min.js, both aren't working, I added console.log() function to be sure and the code isn't even working on both ...
This is my app.blade.php file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'E-Commerce Test') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/materialize.js') }}" defer>
console.log("I am 1");
</script>
<script src="{{ asset('js/jquery-3.3.1.min.js') }}" defer>
$(document).ready(function(){
$('.tabs').tabs();
console.log("I am 2");
});
</script>
<script>
console.log("I am 3");
</script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css">
<!-- Styles -->
<style type="text/css">
#font-face {
font-family: Indie Flower, cursive;
src: url('{{ public_path('/public/fonts/IndieFlower.ttf') }}');
}
</style>
<link href="{{ asset('css/materialize.css') }}" rel="stylesheet">
<link href="{{ asset('css/costume.css') }}" rel="stylesheet">
</head>
<body>
#include('inc.navbar')
<div id="app">
<main class="py-4">
#yield('content')
</main>
</div>
#include('inc.footer')
<script src="{{ asset('js/materialize.js') }}" defer>
console.log("I am 1");
</script>
<script src="{{ asset('js/jquery-3.3.1.min.js') }}" defer>
$(document).ready(function(){
$('.tabs').tabs();
console.log("I am 2");
});
</script>
<script>
console.log("I am 4");
document.addEventListener('DOMContentLoaded', function() {
options ={};
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, options);
});
</script>
<script>
console.log("I am 5");
</script>
</body>
</html>
And here it is my Tabs code
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab">Winter</li>
<li class="tab">Summer</li>
<li class="tab">Sports</li>
<li class="tab">Costumized</li>
<li class="tab">Classic</li>
<li class="tab">Traditional</li>
</ul>
</div>
<div class="col s12" id="winter">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestiae quo porro, doloribus nulla,
pariatur beatae consequatur eaque sequi quaerat ipsam,
enim atque assumenda quis quisquam.
Pariatur ullam cum sint inventore!
</div>
<div class="col s12" id="summer">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestiae quo porro, doloribus nulla,
pariatur beatae consequatur eaque sequi quaerat ipsam,
enim atque assumenda quis quisquam.
Pariatur ullam cum sint inventore!
</div>
<div class="col s12" id="sports">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestiae quo porro, doloribus nulla,
pariatur beatae consequatur eaque sequi quaerat ipsam,
enim atque assumenda quis quisquam.
Pariatur ullam cum sint inventore!
</div>
<div class="col s12" id="cos">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestiae quo porro, doloribus nulla,
pariatur beatae consequatur eaque sequi quaerat ipsam,
enim atque assumenda quis quisquam.
Pariatur ullam cum sint inventore!
</div>
<div class="col s12" id="cla">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestiae quo porro, doloribus nulla,
pariatur beatae consequatur eaque sequi quaerat ipsam,
enim atque assumenda quis quisquam.
Pariatur ullam cum sint inventore!
</div>
<div class="col s12" id="tra">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestiae quo porro, doloribus nulla,
pariatur beatae consequatur eaque sequi quaerat ipsam,
enim atque assumenda quis quisquam.
Pariatur ullam cum sint inventore!
</div>
</div>
In the console of Google Chrome i got "I am 3" , "I am 4" and "I am 5"
I tried to replace the script tags in the end of the file but no use :(
I also used the Materialize Dropdown using JS and worked fine... Any idea guys ?
And Thanks guys in advance
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>
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>