I've install Ratchet package from Atpmosphere.
CSS work fine, but some script not. For example, Modal. I try to invoke it simply by adding the example code from Ratchet website to test:
Open modal
<div id="myModalexample" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal</h1>
</header>
<div class="content">
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
but nothing appear. No errors appear in the JS console.
How can I use Ratchet Modal in Meteor? Which kind of Meteor mobile UI framework you suggest me to prevent this error (if Ratchet is bad to use)?
Thanks!
Related
I have a toggle to show/hide a specific DIV and change the button text based on the current React Hook State. When I view the console log, every single time I click it re-renders the complete page again in Next.js. Not 100% sure if this is normal, But I don't think this should happen if you only toggle one element.
useEffect you can pass property to say whether a specific state is changed or not.
Is there a smarter way of toggling an element and changing its text on click? Without having to re-render the complete code but only the part that you are working with.
import { useEffect, useState } from "react";
import { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import HeroModule from "#modules/HeroModule";
import VideoModule from "#modules/VideoModule";
import ImageModule from "#modules/ImageModule";
import SliderModule from "#modules/SliderModule";
import QuoteModule from "#modules/QuoteModule";
import PreFooterModule from "#modules/PreFooterModule";
import Footer from "#components/Footer";
import Comments from "#components/Comments";
const Article: NextPage = () => {
const btnClass = "bg-transparent";
const text = "Reactie plaatsen";
const [buttonActive, setButtonActive] = useState(btnClass);
const [buttonText, setButtonText] = useState(text);
const [openForm, setOpenForm] = useState(false);
const onToggleForm = () => {
setOpenForm(!openForm);
if (!openForm) {
setButtonText("Sluiten");
setButtonActive("bg-navyBlue text-white");
} else {
setButtonActive("bg-transparent text-navyBlue");
setButtonText(text);
}
};
return (
<>
<Head>
<title>Artikel Detail</title>
<meta name="author" content="" />
<meta name="description" content="Developed by Friends For Brands" />
<link rel="icon" href="/favicon.ico" />
</Head>
<HeroModule
title="De headline van deze tekstuele content"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
/>
<div className="max-w-screen-xl px-6 pt-16 pb-12 mx-auto border-b-2 border-gray-300 lg:px-8 text-navyBlue ">
<div className="grid w-full grid-cols-12 gap-6">
<aside className=" lg:col-span-3 col-span-full">
<div className="grid grid-cols-12 lg:sticky lg:top-5 lg:block">
<div className="col-span-2 mb-4 avatar">
<div className="w-16 h-16 sm:h-20 sm:w-20 md:w-24 md:h-24 rounded-full ring ring-[#65c3c8] ring-offset-base-100 ring-offset-2">
<img src="https://i.pravatar.cc/300" alt="" />
</div>
</div>
<div className="col-span-8 leading-2">
<p className="font-bold">John Doe</p>
<p>Marketing Manager</p>
<p className="mt-2 md:mt-6">00/00/0000</p>
<p>Leestijd 10 minuten</p>
<div className="mt-6 card-actions">
<Link href="/tag/fashion" passHref>
<span className="text-[11px] font-semibold uppercase cursor-pointer badge badge-outline hover:bg-navyBlue hover:text-white">
Fashion
</span>
</Link>
<Link href="/tag/products" passHref>
<span className="text-[11px] font-semibold uppercase cursor-pointer badge badge-outline hover:bg-navyBlue hover:text-white">
Products
</span>
</Link>
</div>
</div>
</div>
</aside>
<main className="leading-relaxed col-span-full lg:col-span-9 md:text-normal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<h2 className="mt-3 text-3xl md:text-4xl">Heading 2</h2>
<h3 className="mt-3 text-2xl md:text-3xl">Heading 3</h3>
<h4 className="mt-3 text-xl md:text-2xl">Heading 4</h4>
<ul className="pl-6 my-4 list-disc">
<li>Lorem ipsum dolor sit amet</li>
<li>
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
</li>
<li>Et dolore magna aliqua. Ut enim ad minim veniam</li>
<li>
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</li>
</ul>
<h2 className="mt-6 text-3xl md:text-4xl">H2: Tussentitel</h2>
<ul className="pl-6 my-4 list-decimal">
<li>Lorem ipsum dolor sit amet</li>
<li>
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
</li>
<li>Et dolore magna aliqua. Ut enim ad minim veniam</li>
<li>
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</li>
</ul>
<h5 className="font-bold">Tussentitel paragraaf</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<h3 className="mt-6 text-2xl md:text-3xl">H3: Video Module</h3>
<VideoModule id="mkggXE5e2yk" platform="youtube" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<h3 className="mt-6 text-2xl md:text-3xl">H3: Image Module</h3>
<ImageModule
url="https://images.pexels.com/photos/1193743/pexels-photo-1193743.jpeg"
caption="Photo of multicolored abstract painting"
alt="A Pexels image"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<h3 className="mt-6 text-2xl md:text-3xl">H3: Slider Module</h3>
<SliderModule />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<h3 className="mt-6 text-2xl md:h2text-3xl">H3: Quote Module</h3>
<QuoteModule />
</main>
</div>
</div>
<div className="w-full max-w-4xl px-4 py-20 mx-auto">
<div className="flex gap-4">
<h2 className="text-4xl">Comment Module</h2>
<button
onClick={onToggleForm}
className={`items-center justify-center px-4 py-2 text-xs font-medium uppercase transition duration-150 ease-in-out ${buttonActive} border rounded-full shadow-sm cursor-pointer border-navyBlue place-self-start sm:mt-0 hover:border-transparent hover:bg-navyBlue hover:text-white`}
>
{buttonText}
</button>
</div>
{openForm && <p>OPEN</p>}
</div>
{/* <Comments isOpen={openForm} toggleForm={onToggleForm} /> */}
<PreFooterModule />
<Footer />
</>
);
};
export default Article;
You can wrap onToggleForm in useCallback to memoize it. Then that function won't be recreated with every render. Also, be aware that using react strict mode will purposely double render to help you catch any side effects (a good thing and only happens in debug). So you can temporarily remove the <React.StrictMode> tags and see if your console.logs() stop doubling up.
I just copied the code of bootstrap accordion from bootstrap components https://getbootstrap.com/docs/5.0/components/accordion/ ,
Expected that there will be a dropdown but it is not there
Do not want to use the react bootstrap component https://react-bootstrap.netlify.app/components/accordion/
import React from "react";
export default function about(){
return (
<div className="container">
<div className="accordion" id="accordionPanelsStayOpenExample">
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingOne">
<button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" className="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div className="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingTwo">
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" className="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div className="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingThree">
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" className="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
<div className="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
);
}
I also imported import 'bootstrap/dist/css/bootstrap.min.css'; in app.js
but on rendering only the top accordion is showing cannot drop down other accordion.
Noob at react :)
You also need to install Bootstrap JS...
npm install bootstrap#latest --save
Then the data-bs- attributes will work to activate the Accordion Collapse component.
Demo
I am not sure if you have imported bootstrap.js or not.
but first install the bootstrap package from npm with this commmand:
npm install bootstrap#latest --save
Then import the bootstrap css and JS in your application. As I can see to work accordian it needs bootstrap.js should be included. Include below code in your react application.
import 'bootstrap/dist/css/bootstrap.min.css'
import "bootstrap/dist/js/bootstrap.bundle.min.js"
Note: I will suggest to use useEffect hook to import bootsrtarp JS, but to try working above method also work.
useEffect(() => {
require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);
Here is working example: https://codesandbox.io/embed/youthful-dawn-43lx6e?fontsize=14&hidenavigation=1&theme=dark
The easiest way to solve your problem is to install Bootstrap, wich you didn't do it seems.
npm install react-bootstrap#next bootstrap#5.1.1
Then in the file where you want to use the component from Bootstrap, you must import the component, like so:
import Accordion from 'react-bootstrap/Accordion'
Note: Replace Accordion by whatever other component you would need.
Then in your code you can call this component like so:
<Accordion defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
You can learn more on this topic here: https://react-bootstrap.netlify.app/components/accordion/
If you want to use your code with bootstrap without react bootstrap component then copy the following lines into the index.html file head which will be available in react folder -> public -> index.html
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
This links the bootstrap stylesheet to your react app.
Read more at bootstrap getting started.
I was working with routing in angularjs
My aim here is to use routing to route pages to the index.html page.
When I click the home and courses anchor tag I expect to include the contents of the respected files home.html and courses.html to load in ng-view which is showing blank when I click.
There is also no error in the console which makes me hard to understand.
I am a beginner in angularjs.
Please comment for any query.
Below is the code for index.html
<!DOCTYPE html>
<html>
<head>
</style>
</head>
<body ng-app="myModule">
<div>
<h1>Indexpage</h1>
<ul>
<li>
Home
</li>
<li>
Courses
</li>
</ul>
</div>
<div>
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="custom.js"></script>
</body>
</html>
Below is the code for home.html
<h1>
{{ message }}
</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Below id the code for courses.html
<h1>
{{ message }}
</h1>
<div>
<ul>
<li ng-repeat="course in courses">
{{ course }}
</li>
</ul>
</div>
Below is the code for custom.js
var myApp = angular.module("myModule",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/home",{
templateURL : "Templates/home.html",
controller : "homeController"
})
.when("/courses",{
templateURL : "Templates/courses.html",
controller : "courseController"
});
})
.controller("homeController",function($scope){
$scope.message = "Home";
})
.controller("courseController",function($scope){
$scope.message = "Courses";
$scope.courses = ["PHP","JAVA","mysql","Oracle","javascript"];
}));
I made a plnkr, which made several things obvious:
you have invalid HTML in your index.html page: </style>
your JS code is invalid too: it has two closing parentheses instead of one
after fixing that, the page displays fine, but clicking on the link doesn't load the home or courses view as it should: the page stays unmodified.
There are two reasons, as shown in the plnkr:
The URLs of the links should be #!/home and #!/courses, not #/home and #/courses (see the documentation)
The proper property for the template URL in the router configuration is templateUrl, not templateURL (see the documentation).
I have created a simple ng-click function that hides and shows a DIV.
However, rather and simply appearing and disappearing, does angular have the ability to give a sliding effect?
Here's a plunkr: http://plnkr.co/edit/jbHidL3oOQvi4RBCkJIF?p=preview
HTML:
<div class="grid-wrap">
<div class="grid-col one-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Show the slidy section
</div>
<div class="grid-col two-thirds" ng-show="showMe">
My hidden section that i want to slide out
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis irure dolor in repr</p>
</div>
</div>
You should have a good read about ng-animate (it have to be injected into your app - something a lot of ppl forget) then you can take a look here
http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation
a well designed examples of what ng-animate can do
Google CDN angularjs-animate.min.js
I have a set of headings (<h3>) that when clicked, they hide/show their corresponding sections.
I have achieved this by using ng-show/ng-hide and then calling a $scope variable isInactive/isActive.
What i would like to know, is if the same result can be achieved, without the need for using JS within $scope.isInactive and $scope.isActive and logic be placed in the HTML markup? Possibly with the us of ng-class?
HTML:
<div ng-app="">
<div ng-controller="EventController">
<div class="tabs">
<h3 class="" id="tab-{{$index}}-0"><a id="1" data="{{$index}}" ng-click="switch($event)">1 - 5 Years</a></h3>
<h3 class="inactive" id="tab-{{$index}}-1"><a id="2" data="{{$index}}" ng-click="switch($event)">6 - 10 Years</a></h3>
<h3 class="inactive" id="tab-{{$index}}-2"><a id="3" data="{{$index}}" ng-click="switch($event)">11 - 15 Years</a></h3>
<h3 class="inactive" id="tab-{{$index}}-3"><a id="4" data="{{$index}}" ng-click="switch($event)">16 - 20 Years</a></h3>
<div class="clear" data="{{$index}}" ng-hide="isInactive('#tab-'+{{$index}} + '-0')">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-1')">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-2')">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-3')">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
</div>
</div>
</div>
JS:
function EventController($scope) {
$scope.
switch = function (e) {
var target = e.target || e.srcElement;
var elem = angular.element(target);
var parent = elem.parent();
var allHeadings = parent.parent().find("h3");
angular.forEach(allHeadings, function (aHeading) {
var child = angular.element(aHeading);
child.addClass("inactive");
});
parent.removeClass("inactive");
}
$scope.isInactive = function (e) {
var elem = angular.element(document.querySelector(e));
if (elem.hasClass("inactive")) {
return true;
} else {
return false;
}
};
$scope.isActive = function (e) {
var elem = angular.element(document.querySelector(e));
if (elem.hasClass("inactive")) {
return false;
} else {
return true;
}
};
}
My jsFiddle: http://jsfiddle.net/oampz/Wr79J/2/
Yes, you have correctly identified this the apt place for using ng-class.
It is possible to do only using HTML and a minimalistic controller: http://jsfiddle.net/Wr79J/4/
JS
function EventController($scope) {
$scope._activeTab = 1;
}
HTML
<div ng-app="">
<div ng-controller="EventController">
<div class="tabs">
<h3 ng-class="{ 'inactive': _activeTab !== 1, 'active': _activeTab == 1 }">
<a id="1" ng-click="_activeTab=1">1 - 5 Years</a></h3>
<!-- .... -->
<div class="clear" ng-show="_activeTab == 1">
1 - 5 Years Text - Lorem ipsum ...
</div>
</div>
Note: I think you were using {{$index}} from a scope this part of the template had inherited. I have left that untouched in the example.
Though this works, this code is not very maintainable. You may want to use more descriptive names for the tabs instead of 1, 2, 3, and 4.
You can get rid of the controller completely using an ng-init="_activeTabe = 1" on the container div, but it is not the correct use of ng-init.
Also, it is not considered good practise to manipulate the DOM in any way from the controller (I am looking at the addClass/removeClass in the code). If it is necessary, then one should use directives (e.g. ng-class) for the manipulation.
You can just set a variable to set the active tab.
<div class="tabs">
<h3 ng-click="range=1">1-5</h3>
<h3 ng-click="range=2">6-10</h3>
<div class="clear" ng-show="range==1">1 - 5 Years Text</div>
<div class="clear" ng-show="range==2">6 - 10 Years Text</div>
</div>
Here is an example - http://plnkr.co/edit/NTVPbOC5k7HKo88qp6vN?p=preview with no javascript code for the above logic.
<div>
<div>
<div class="tabs">
<h3 ng-init="active=1" ng-click="active=1" ng-class="{true:'active', false:'inactive'}[active==1]"><a >1 - 5 Years</a></h3>
<h3 ng-click="active=2" ng-class="{true:'active', false:'inactive'}[active==2]"><a >6 - 10 Years</a></h3>
<h3 ng-click="active=3" ng-class="{true:'active', false:'inactive'}[active==3]"><a >11 - 15 Years</a></h3>
<h3 ng-click="active=4" ng-class="{true:'active', false:'inactive'}[active==4]"><a >16 - 20 Years</a></h3>
<div ng-show="active==1">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div ng-show="active==2">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div ng-show="active==3">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div ng-show="active==4">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
</div>
</div>
</div>