Node-Red dashboard template UI - AngularJS Bootstrap Carousel with ng-repeat - angularjs

I've been scratching my head to make a Bootstrap Carousel with AngularJS inside a Node-Red Dashboard template node. I have even found several tips here, but the presented solutions are not working for me... here is the complete code inside Node-Red dashboard template: (any help is much appretiatted!)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Spotify UI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab md-on-select="send({getFeatured: true})" ng-click="send({getFeatured: true})">
<md-tab-label><md-icon ng-md-icon icon="stars" style="fill: LIGHTGREEN"></md-icon></md-tab-label>
<md-tab-body>
<md-content>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in featured track by $index">
<img class="d-block w-100" src="{{item.images[0].url}}" alt="missing">
<p>{{$index}}</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</md-content>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload.playlists.items) {
scope.featured = msg.payload.playlists.items;
};
});
})(scope);
</script>
</body>
</html>
Update 01.10.2018 - I finally managed to make it work after changing the class from class="item"to class="carousel-item".

Related

How to center a md-content tag in material

How do I center md-content, I used this layout-align but it's not working:
<md-content flex="75" layout-padding layout-align="center center">
<p align="justify">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</md-content>

Add layout-align="center center" and that should work,
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center">
<div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
<md-card class="card-40-center">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Sign Up</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
</md-content>
<div layout="column" layout-fill flex style="max-height:100%">
</div>
</body>
</html>

Point is layout-align will not work without specifying layout='row'or layout='column' and make you have enough flex to see the space in between. Even writing just layout would default to row.

select tag of angularjs in not working in safari

I have made a simple registration page with angularJS-materials, my issue is a select tag which is properly working over windows, android phones except iPhone's safari.
So can anyone help me about this!
That's my code below:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
<title>Form | angularJs</title>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<link rel="stylesheet" href="https://material.angularjs.org/1.1.3/docs.css">
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="w3.css">
<script src="query.js">
</script>
</head>
<body>
<header class="w3-container w3-teal">
<h1><center>School.com</center></h1>
</header>
<div class="container">
<div class="well ng-scope" ui-view="content">
<div ng-controller="ContactController">
<div class="row">
<form class="well" name="myForm">
<md-input-container class="md-block" flex-gt-sm>
<label>State</label>
<md-select ng-model="State" name="state" placeholder="Select State" style="text-indent: 6px; line-height: 30px;">
<md-option value="pune">Pune</md-option>
<md-option value="mumbai">Mumbai</md-option>
<md-option value="nagpur">Nagpur</md-option>
<md-option value="nashik">Nashik</md-option>
</md-select>
<div ng-messages="myForm.state.$error"
ng-show="myForm.state.$dirty">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<br />
<input type="hidden" ng-model="newcontact.id" />
<md-button ng-disabled="(myForm.$invalid)&& action != 'VIEW'" ng-click="saveContact()" class="md-raised md-primary">Submit</md-button>
<md-button type="reset" class=" md-warn md-raised md-hue-2">Reset</md-button>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-teal">
<h5><center>Copyright © School.com</center></h5>
</footer>
</body>
</html>

There is no problem with code, just need to update this meta tag. Thats it!

AngularJs UIRouting

I am trying to use UI router but I can't get to open the view of the first page don't know why it won't show the template. It would only show the index.html element. Help would be appreciated I am new to Angular
<!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>Webstie Designing</title>
<!-- Angular Scripts -->
<script src="js/angular.min.js"></script>
<script src ="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<!-- Application Scripts-->
<script type="text/javascript">"app/app.js"</script>
</head>
<body id="page-top" ng-app="portfolio">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#/">Web Designing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
(function(){
"use strict";
var app = angular.module("portfolio",["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider",
function("$stateProvider","$urlRouterProvider"){
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home",{
url:"/",
templateUrl:"app/Intro.html"
})
}]
);
}());

First thing you need to refer app.js script reference correctly to make portfolio module available for ng-app
<script type="text/javascript" src="app/app.js"></script>
instead of
<script type="text/javascript">"app/app.js"</script>

Implemented node in angular app gives Syntaxerror and referencerror

I have an angular app and I have implemented node into it later on.
Now when I try to run the node app I receive this kind of errors:
SyntaxError: expected expression, got '<'
jquery.min.js (regel 1)
ReferenceError: angular is not defined
angular.module('controllers').controller('ChallengeCtrl', ['$scope',
'auth',
This is my index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="eva">
<head>
<meta charset="UTF-8" name="viewport" content="initial-scale=1"/>
<title>EVA - eet plantaardig!</title>
<link rel="shortcut icon" type="image/x-icon" href="../styles/favicon.ico">
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/angular-material/angular-material.min.css">
<link rel="stylesheet" type="text/css" href="../styles/animate.min.css" >
<link rel="stylesheet" type="text/css" href="../styles/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body layout="column" ng-controller="AppCtrl" layout-fill>
<!-- ANGULAR MATERIAL LOADING -->
<md-toolbar layout="row">
<div class="md-toolbar-tools ng-scope" ng-controller="NavCtrl as demo">
<md-button ng-click="toggleSidenav('left')" class="md-icon-button" ng-show="isLoggedIn()" aria-haspopup="true" aria-expanded="true"
aria-label="sidebar menu">
<!--<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>-->
<md-tooltip md-direction="bottom">Gebruikers Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
<span>
<md-button md-no-ink href="#/index" aria-label="logo">
<img src="../styles/images/logo/48x48.png" alt="logo" >
</md-button>
</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-fab-speed-dial md-open="demo.isOpen" md-direction="left" ng-class="md-fling"
ng-mouseenter="demo.isOpen = true" ng-mouseleave="demo.isOpen = false">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn">
<md-tooltip md-direction="bottom">Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="Login" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/login">
<md-tooltip md-direction="bottom">Log in</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Registreer" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/register">
<md-tooltip md-direction="bottom">Registreer</md-tooltip>
<span class="glyphicon glyphicon-plus"></span>
</md-button>
<md-button aria-label="Profiel" class="md-fab md-raised md-mini" ng-show="isLoggedIn()" href="#/profile">
<md-tooltip md-direction="bottom">Profiel</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Logout" class="md-fab md-raised md-mini" ng-show="isLoggedIn()"
ng-click="logOut()">
<md-tooltip md-direction="bottom">Log out</md-tooltip>
<span class="glyphicon glyphicon-off"></span>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-toolbar>
<div layout="row" flex>
<!-- SIDENAV -->
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 md-closed ng-scope ng-isolated-scope" md-component-id="left"
ui-view="sidebarLeft" ng-controller="NavCtrl" layout-fill>
<md-toolbar class="sidebar-left-toolbar ng-scope ">
<div class="md-toolbar-tools layout-align-start-center layout-row">
<div class="sidebar-left-logo">
<img src="../styles/images/logo/32x32.png" alt="logo" width="24px">
</div>
<span flex></span>
<div>
{{ currentUser() }}
</div>
</div>
</md-toolbar>
<div layout="row" flex id="contentSideNav">
<div layout="column" flex>
<md-content layout="column" flex class="md-padding">
<ul>
<li>
<md-button href="#/profile" layout-fill>
Profiel
</md-button>
</li>
<md-divider></md-divider>
<li>
<md-button href="#/challenges" layout-fill>
Challenges
</md-button>
</li>
<md-divider></md-divider>
</ul>
</md-content>
</div>
</div>
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<ui-view></ui-view>
</md-content>
</div>
</div>
<!-- homepage -->
<script type="text/ng-template" id="/home.html"></script>
<!-- loginpage -->
<script type="text/ng-template" id="/login.html" ng-controller="UserCtrl"></script>
<!-- register page -->
<script type="text/ng-template" id="/register.html" ng-controller="UserCtrl"></script>
<!-- challengespage -->
<script type="text/ng-template" id="/challenges.html" ng-controller="ChallengeCtrl"></script>
<!-- profiel page -->
<script type="text/ng-template" id="/profile.html" ng-controller="ProfileCtrl" ></script>
<!-- footer -->
<footer>
<div layout="row" layout-align="space-around center">
<div id="social" layout="row" layout-align="space-around center">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest-p"></i>
</div>
<div>
<p class="text-center">© Copyright 2015 - Projecten Groep 6</p>
</div>
</div>
</footer>
<!-- JS files integration -->
<script type="text/javascript" src="../styles/public/js/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-messages.min.js"></script>
<script type="text/javascript" src="../styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controllers/bootstrap.js"></script>
<script type="text/javascript" src="js/controllers/ChallengeController.js"></script>
<script type="text/javascript" src="js/controllers/AppController.js"></script>
<script type="text/javascript" src="js/controllers/MainController.js"></script>
<script type="text/javascript" src="js/controllers/NavController.js"></script>
<script type="text/javascript" src="js/controllers/UserController.js"></script>
<script type="text/javascript" src="js/controllers/ProfileController.js"></script>
<script type="text/javascript" src="js/factories/bootstrap.js"></script>
<script type="text/javascript" src="js/factories/AuthInterceptorFactory.js"></script>
<script type="text/javascript" src="js/factories/AuthFactory.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
At first I thought that the links to all the files were incorrect from the index.html, but they seem fine so I don't know what the problem is.
Additional info screen:

I think the issue is you have mention wrong reference path for angular libraries.
Like it should point to /js/lib rather than pointing to /styles(which has css)
<script type="text/javascript" src="../js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/lib/angular/angular-ui-router.min.js"></script>
Addtional note is you can't have ng-controller="ProfileCtrl" on script with type="text/ng-template", that wouldn't add controller on that template, you need to specify that ng-controller in the template.

Angular UI-Bootstrap - Collapse function not working

I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});

I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.

Resources