Im working on a program that consists of a webpage generated with cards. I want to make it so when you click on one of the cards a modal pops up but Im having some difficulty. The overlay part works whenever one of the cards is pressed but the modal wont appear.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fish</title>
<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="styles.css">
<script defer src="script.js"></script>
<script src="https://kit.fontawesome.com/c502137733.js"></script>
</head>
<body class="bg-warning">
<div class="container-fluid">
<div class="row">
<div class="col-12 jumbotron mb-3 team-heading bg-primary">
<h1 class="text-center text-warning" style="font-family: 'Times New Roman', Times, serif;">Fish</h1>
</div>
</div>
</div>
<div class="openmodal" data-modal-target="#modal">Open Modal</div>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example Modal</div>
<button data-close-button class="close-button">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis quae quia soluta totam doloribus quos nesciunt necessitatibus, consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum voluptatem totam, molestiae rem at ad autem dolor ex aperiam. Amet assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur sint officiis perferendis atque! Voluptatem maxime eius eum dolorem dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
</div>
</div>
<div id="overlay"></div>
<div class="container">
<div class="row">
{{ team }}
</div>
</div>
</body>
</html>`
Related
I am learning Bootstrap v5.0. I am trying to create a webpage with Bootstrap. I need a help now. I am trying to make a bottom space between two columns on small screens. For Big screen my design is as I need.
I need help on Education section of my code.
* {
/* margin: 0;
padding: 0;
box-sizing: border-box; */
font-family: 'Open Sans', sans-serif;
color: #ffffff;
}
/* ==================== Header ==================== */
header {
background: #9b59b6;
}
.header-title-box {
background: #8e44ad;
}
/* ==================== About Container ==================== */
.about-container {
background: #2ecc71;
}
/* ==================== Education Container ==================== */
.education-container {
background: #34e7e4;
}
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
<!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.0">
<link rel="shortcut icon" type="images/png" href="./images/favicon.jpg">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<title>Project Finishing</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<!-- =================================== Header =================================== -->
<header id="home">
<div class="container-fluid">
<div class="row vh-100">
<div class="col-md-9 m-auto py-4 text-white text-center header-title-box">
<p class="display-1">Dabananda Mitra</p>
<h6>Studying Computer Science and Engineering at ISTT</h6>
<h6>Dream: Software Engineer at Google, USA</h6>
</div>
</div>
</div>
</header>
<!-- =================================== Navbar Section =================================== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-expanded="false" aria-controls="navMenu" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav m-auto text-uppercase">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Packages
</li>
<li class="nav-item">
Reviews
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Education
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<!-- =================================== About =================================== -->
<div class="about-container py-5" id="about">
<div class="container">
<div class="row align-items-center d-flex justify-content-center">
<div class="col-md-8">
<p class="display-5">Dabananda Mitra</p>
<p class="text-muted">Student | Software Engineer | YouTuber</p>
<p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
<p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
<p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
</div>
<div class="col-md-4">
<img class="img-fluid rounded-circle border border-light" src="./images/Dabananda_Mitra-removebg-preview.png" alt="Dabananda Mitra">
</div>
</div>
</div>
</div>
<!-- =================================== Education =================================== -->
<div class="education-container py-5" id="education">
<div class="container">
<p class="display-4 text-center">Education</p>
<hr class="mb-5" style="height: 2px; width: 50%; text-align: center; margin: auto;">
<div class="row my-5">
<div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">BSc</p>
</div>
<div class="col-md-8 card m-auto" style="background: #3c40c6;">
<div class="card-body">
<h5 class="card-title">Institute of Science Trade & Technology</h5>
<hr>
<h6 class="card-subtitle mb-5">2020 - 2024</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">HSC</p>
</div>
<div class="col-md-8 card m-auto" style="background: #3c40c6;">
<div class="card-body">
<h5 class="card-title">Agricultural University College</h5>
<hr>
<h6 class="card-subtitle mb-5">2016 - 2018</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">SSC</p>
</div>
<div class="col-md-8 card m-auto" style="background: #3c40c6;">
<div class="card-body">
<h5 class="card-title">Balijuri F.M. High School</h5>
<hr>
<h6 class="card-subtitle mb-5">2011 - 2016</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
</div>
</div>
</div>
</div>
</div>
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
Here is Images:
On big screen it is ok
But on small screen I want a space here
How can I do that?
Moreover, you can use the calc function inside the style attribute such as margin-bottom:calc(20vh - 10%)
So what you want to use is mx-auto my-5
<div class="col-md-4 d-flex align-items-center justify-content-center my-5 mx-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">BSc</p>
</div>
you just add a bootstrap class
<div class="col-md-8 card m-auto my-5" style="background: #3c40c6">
<div class="card-body">
<h5 class="card-title">Agricultural University College</h5>
<hr />
<h6 class="card-subtitle mb-5">2016 - 2018</h6>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Exercitationem non recusandae architecto dolores atque est,
quisquam minus tempora, libero soluta distinctio, natus nostrum
veniam reprehenderit neque unde totam! Suscipit dolor harum
vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab
repudiandae autem debitis soluta molestias nostrum neque
corrupti!
</p>
</div>
</div>
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>
I'm trying to develop myself just on bootstrap and I wonder that how to create boostrap tab to responsive without plugin and I found a few plugin for tab to responsive but I want to learn how can I make it without plugin?
for example as image (it can be like this)
.myTab{
margin:70px;
width:700px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="myTab">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo asperiores, architecto sunt ex dignissimos nihil eaque voluptate, iure iusto porro, rem animi odio, amet consequatur saepe nam accusamus perspiciatis deserunt?</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Profile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus neque suscipit omnis dolore at consequuntur commodi itaque dignissimos quibusdam consectetur officia earum laborum accusantium, corporis quaerat ullam modi repellendus.</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Messages</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi inventore dignissimos nisi quisquam sit commodi, laboriosam perspiciatis omnis praesentium voluptate illum magni! Quo, odio itaque recusandae quam veniam tempore cupiditate.</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Settings</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quam illo magni itaque fugit quo aperiam minus officia a, cumque, error, quidem voluptates cupiditate asperiores dolorum necessitatibus commodi culpa dicta.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Don't give any width allow bootstrap to set it or use media queries in css. Alternatively use bootstrap grid like col-lg-12 or something which fits. you can also use .container class which sets the width to 800px and is responsive too.
What about taking the float left off of the tab items for the size you want to change it
#media screen and (max-width: 767px) {
.nav-tabs>li {
float: none;
}
}
I created this one here code https://jsfiddle.net/zrss7hor/2/ each time you resize your browser the tabs will adapt it
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>