I need to make a jQuery code that every time I click on <li> this span
<span id="add_icon" class="fa fa-check"></span> shows and this span hides
<span id="add_skill" class="fa fa-plus-circle"></span>
this is my code:
<ul id="skill-job-list" class="available-skill-list">
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
</ul>
$(".job_item").on("click", function() {
$(this).find("span").toggleClass("fa-plus-circle fa-check");
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="skill-job-list" class="available-skill-list">
<li>
<div data-job="149" title="Business Plans" class="skill-select-bubble job_item">
Business Plans (809 jobs)
<span class="fa fa-plus-circle add_skill"></span>
</div>
</li>
<li>
<div data-job="149" title="Business Plans" class="skill-select-bubble job_item">
Business Plans (809 jobs)
<span class="fa fa-plus-circle add_skill"></span>
</div>
</li>
<li>
<div data-job="149" title="Business Plans" class="skill-select-bubble job_item">
Business Plans (809 jobs)
<span class="fa fa-plus-circle add_skill"></span>
</div>
</li>
</ul>
First, you can't have the same id for each block, so your id "job_item" should become a class ".job_item", same for "add_skill" and "add_icon" so you can do this :
$(".job_item").on("click", function() {
$(this).find(".add_skill").hide();
$(this).find(".add_icon").show();
});
Now if you need to change witch one is hide() and show() for every click, maybe you can try this :
<span id="add_skill" class="fa fa-plus-circle"></span> // keep one and delete the other span
$(".job_item").on("click", function() {
$(this).find("span").toggleClass("fa fa-plus-circle fa-check");
});
Is this what you are looking for?
You can't set same id for multiple html elements.. so set class name for each of them.
<span id="add_skill" class="fa fa-plus-circle add_skill_class"></span>
<span id="add_icon" class="fa fa-check add_icon_class"></span>
$('#skill-job-list').on('click', function(){
$(this).find('.add_skill_class').hide();
$(this).find('.add_icon_class').show();
});
Try below code
$('li').on('click', function() {
$(this).find('.fa-plus-circle').show();
$(this).find('.fa-check').hide();
});
span.fa-plus-circle {display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul id="skill-job-list" class="available-skill-list">
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"></span>
<span id="add_icon" class="fa fa-check"></span>
</div>
</li>
</ul>
$(document).ready(function(){
$(".fa-plus-circle").hide();
$(".fa-check").hide();
$('li').on("click",function(){
var index = $(this).index();
$(".fa-plus-circle:eq("+index+")").toggle();
$(".fa-check:eq("+index+")").toggle();
});
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle">add_skill 1</span>
<span id="add_icon" class="fa fa-check">add_icon 1</span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle">add_skill 2</span>
<span id="add_icon" class="fa fa-check">add_icon 2</span>
</div>
</li>
<li>
<div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">
Business Plans (809 jobs)
<span id="add_skill" class="fa fa-plus-circle"> add_skill 3</span>
<span id="add_icon" class="fa fa-check"> add_icon 3</span>
</div>
</li>
</ul>
Related
I am making some mapping with moviedb api using innerhtml, the problem i am having is with the Main.appendChild where the appendChild is handle as a property and not as a function. I am having the same issue in the console with the entire main array and i think it might having something to do with the fact that i am declering the main object to a htmlelemnt then to a array. Btw i have given up on this project hence it wasnt worth the extra time that it took
this is kinda of a filler part so excuse me pls.
const API_KEY = "api_key=0a2c754df24f03f4197199045aedf7de";
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const main = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url).then(res => res.json())
.then(data => {
console.log(data.results);
showMovies(data.results);
})
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach(main => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
main.appendChild(movieEl);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="img/favicon.png" />
<title>Movies - Get Booked Online</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"
/>
<!-- Bootstrap core CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" /></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"
><i class="fas fa-home"></i> Home</a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-film"></i> Movies</a>
</li>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
><i class="fas fa-crown"></i> Genre</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Adventure</a>
<a class="dropdown-item" href="#">Horror</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Animation</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
</div>
</li>
</ul>
<a class="nav-button" href="movies.html"
><i class="fas fa-newspaper"></i> Latest Movies</a
>
</div>
</nav>
<!-- breadcrumbs -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Movies</li>
</ol>
</nav>
<!-- /breadcrumbs -->
<!-- movie cards -->
<div class="container">
<div class="alert alert-primary" role="alert">
<i class="fas fa-exclamation-circle"></i> The following movies are
currently in theaters.
</div>
<main id ="main">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/wCvTSaIQEweNdsU98usvt9re7fq.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Avengers: Infinity War</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
As the Avengers and their allies have continued to protect the
world from threats too large for any one hero to handle, a new
danger has emerged from the cosmic shadows: Thanos.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/to0spRl1CMDvyUbOnbb4fTk3VAd.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Deadpool 2
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.3</a
>
</span>
<p>
Wisecracking mercenary Deadpool battles the evil and powerful
Cable and other bad guys to save a boy's life.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/uxzzxijgPIY7slzFvMotPv8wjKA.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Black Panther
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 7.6</a
>
</span>
<p>
King T'Challa returns home from America to the reclusive,
technologically advanced African nation of Wakanda to serve as
his country's new leader. However, T'Challa soon finds that he
is challenged for the throne by factions within his own country
as well as without.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/jjPJ4s3DWZZvI4vw8Xfi4Vqa1Q8.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>Fifty Shades Freed</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 4.4</a
>
</span>
<p>
A young Silicon Valley tech-titan enlists a veteran surgeon with
a controversial past in starting a hospital with a cutting-edge,
new school approach to medicine.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/vLCogyfQGxVLDC1gqUdNAIkc29L.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Red Sparrow
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="single-movie.html" class="list-meta-item"
><i class="fas fa-star"></i> 6.7</a
>
</span>
<p>
Prima ballerina, Dominika Egorova faces a bleak and uncertain
future after she suffers an injury that ends her career. She
soon turns to Sparrow School, a secret intelligence service that
trains exceptional young people to use their minds and bodies as
weapons.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/30oXQKwibh0uANGMs0Sytw3uN22.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Rampage
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.4</a
>
</span>
<p>
Primatologist Davis Okoye shares an unshakable bond with George,
the extraordinarily intelligent, silverback gorilla who has been
in his care since birth. But a rogue genetic experiment gone
awry mutates this gentle ape into a raging creature of enormous
size.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/pU1ULUq8D3iRxl1fdX2lZIzdHuI.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Ready Player One</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
When the creator of a popular video game system dies, a virtual
contest is created to compete for his fortune.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/85R8LMyn9f2Lev2YPBF8Nughrkv.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Game Night
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.2</a
>
</span>
<p>
Max and Annie's weekly game night gets kicked up a notch when
Max's brother Brooks arranges a murder mystery party -- complete
with fake thugs and federal agents. So when Brooks gets
kidnapped, it's all supposed to be part of the game.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /movie cards -->
<br />
<!-- Newsletter -->
<!-- /Newsletter -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item">
About us
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Refunds
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Terms and Privacy
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Contact
</li>
</ul>
<p class="small mb-4 mb-lg-0">
Omar Ahmad© 2018. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="https://linkedin.com/in/byalk" class="footer-fb">
<i class="fab fa-linkedin fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#" class="footer-tw">
<i class="fab fa-twitter fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="footer-in">
<i class="fab fa-instagram fa-2x fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>
You have two variables named 'main', one is the getElementById and the other is from the forEach loop. Change one and it should work
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const mainEl = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data.results);
showMovies(data.results);
});
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach((main) => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
mainEl.appendChild(movieEl);
});
}
Sandbox Code
In the forEach loop you are declaring each array item as ‘main’.
Therefore main.appendChild() is called upon the array item, not on the HTML element.
Change the item name in the forEach loop to something like ‘movie’, and then ofcourse also in the first line of the loop.
So I have a toggled navigation menu and inside that menu and I have another 2 ul menus. I want to implement a feature so If user clicks out of any navigation container toggle the navigation to close it self rather then clicking on the close button. I want to make subNavActive, safNavAcitve and repNavUl = false again when the user clicks out of the Toggled Nav Container.
new Vue({
el: '#app',
data: {
visible: false,
home: true,
show: false,
active: false,
subNavActive: false,
safNavShow: false,
repNavUl: false,
admNavShow: false,
rotateDropDown: false
},
methods: {}
});
HTML CODE BELOW
<div class="container">
<!-- Main nav starts here -->
<!-- main nav vue transition below -->
<transition name="slide-fade">
<!-- vue animation if/else below -->
<nav class="main-nav" v-if="show">
<!-- Main nav header and title -->
<div class="main-nav-header">
<h2>Hello User</h2>
<h3>Welcome Back</h3>
</div>
<div class="main-nav-container">
<!-- Main navigation ul list below -->
<ul class="main-nav-ul">
<li>
<li class="split-li">
<span>
<i class="fas fa-calendar-alt"></i>
</span>
MY SCHEDULE & BIDDING
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
</li>
<li>
<li class="split-li">
<span>
<i class="fas fa-handshake"></i>
</span>
SAFETY
<a class="main-nav-spans" #click="safNavShow = !safNavShow" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
<!-- Sub nav transition below -->
<transition name="slide-right">
<!-- vue animation if/else below -->
<div class="sub-nav saf-nav-toggle" v-if="safNavShow">
<div class="sub-nav-header ">
<h3>
<li class="split-li">
<span>
SAFETY
</span>
<a #click="safNavShow = !safNavShow" class="sub-nav-icons" href="#">
<i class="fas fa-times"></i>
</a>
</li>
</h3>
</div>
<ul class="sub-nav-menu">
<li>
<li class="split-li">
<span>
Reporting
</span>
<a #click="repNavUl =!repNavUl, rotateDropDown =!rotateDropDown" v-bind:class="{ rotateDropDown: rotateDropDown }" class="main-nav-spans"
href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
<transition name="rep-nav">
<ul class="sub-nav-ul" v-if="repNavUl">
<li>
I-21 Injury Reporting
</li>
<li>
ASAP Reporting
</li>
<li>
General ASAP Information
</li>
<li>
Flight Attendent Incident Report
</li>
</ul>
</transition>
</li>
<li>
<li class="split-li">
<span>
Agriculture & Customs
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="sub-first-nav-li">
Known Crewmember
</li>
</li>
<li>
<li class="sub-first-nav-li">
Products Safety Data Search
</li>
</li>
</ul>
</div>
</transition>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-users"></i>
</span>
TRAINING
</li>
</li>
<li>
<li class="split-li ">
<span>
<i class="fas fa-user"></i>
</span>
ADMINSTRATION
<a class="main-nav-spans" #click="admNavShow = !admNavShow" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
<transition name="slide-right">
<div class="sub-nav admin-nav-toggle" v-if="admNavShow">
<div class="sub-nav-header">
<h3>
<li class="split-li">
<span>
ADMINSTRATION
</span>
<a #click="admNavShow = !admNavShow" class="sub-nav-icons" href="#">
<i class="fas fa-times"></i>
</a>
</li>
</h3>
</div>
<ul>
<li>
<li class="split-li">
<span>
OJI and Leaves
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="split-li">
<span>
Pay and Benefits
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="split-li">
<span>
Performace
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="sub-first-nav-li">
Inflight Resource Directory
</li>
</li>
<li>
<li class="split-li">
<span>
Mobile and Web
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="sub-first-nav-li">
AFA
</li>
</li>
</ul>
</div>
</transition>
</li>
<li>
<li class="split-li ">
<span>
<i class="fas fa-utensils"></i>
CATERING & BRAND
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-bed"></i>
</span>
HOTELS
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-home"></i>
</span>
MY BASE
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-certificate"></i>
</span>
RECOGNITION
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-male"></i>
</span>
MY LEADERSHIP TEAM
</li>
</li>
</ul>
</div>
</nav>
</transition>
</div>
Tried using Vue-Clickaway?
https://github.com/simplesmiler/vue-clickaway
The solution can look something like this.
import { mixin as clickaway } from 'vue-clickaway';
export default {
mixins: [ clickaway ],
template: '<p v-on-clickaway="away">Click away</p>',
methods: {
away: function() {
console.log('clicked away');
},
},
};
I am new to java and stuck in trying to embed the HTML/CSS and Javascript to the java code.
Any pointers will be helpful to finish building my code. I am using Eclipse editor to write my java code.
I have been able to successfully display some part of HTML display in my java code as below however I am trying to achieve a table sort via html/css/javascript and would like to add that too to my java code.
Below is my display.java file
public void transformForRequestSuccessful(MarkupOutput out) {
//Call render methods
renderdisplay(out);
}
public void renderdisplay(MarkupOutput out)
{
out.append("<BR/>");
out.append("<p>Look at the body!</p>");
out.append("<BR/>");
}
Below is the HTML/CSS/JavaScript that can be pasted as is and runs fine.
I saved this HTML file as sort.html and when called independently works fine.
html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Windows-1252">
<script type="text/javascript">
var people, asc1 = 1,
asc2 = 1,
asc3 = 1;
window.onload = function () {
people = document.getElementById("people");
}
function sort_table(tbody, col, asc) {
var rows = tbody.rows,
rlen = rows.length,
arr = new Array(),
i, j, cells, clen;
// fill the array with values from the table
for (i = 0; i < rlen; i++) {
cells = rows[i].cells;
clen = cells.length;
arr[i] = new Array();
for (j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
// sort the array by the specified column number (col) and order
(asc)
arr.sort(function (a, b) {
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 *
asc);
});
// replace existing rows with new rows created from the sorted array
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}
</script>
<style type="text/css">
table {
border-collapse: collapse;
border: none;
}
th,
td {
border: 1px solid black;
padding: 4px 16px;
font-family: Times New Roman;
font-size: 15px;
text-align: left;
}
th {
background-color: #C8C8C8;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1;
asc3 = 1;">ServerName</th>
<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1;
asc1 = 1;">UserName</th>
<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1;
asc2 = 1;">JobId</th>
</tr>
</thead>
<tbody id="people">
<tr>
<td>Server1</td>
<td>ABC</td>
<td>18</td>
</tr>
<tr>
<td>Server2</td>
<td>XYZ</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
Any help or suggestions how to embed this in java code will be helpful.
My apologies if I sound naive or unaware of the basic java programming.
Thanks
I would use the following frameworks:
Spring IO: https://spring.io/guides/gs/spring-boot/
This example shows you how to create the server and store your HTML/CSS/JavaScript. On the other hand, create a REST service to create a response with your embed HTML code.
JQuery: https://spring.io/guides/gs/consuming-rest-jquery/
This example shows you how to consume a RESTful Web Service with jQuery and append the embed code
In order to escape the special characters you need to integrate the OWASP encoder to encode the data for JS or CSS. Please refer to this link
Although it will not work alone but hope this will help you out to understand the implementation. This is a sample JSP file. In JSP file you can embed java code in the form of tags (scriplet,declarative and expression).
<!DOCTYPE html>
<%#page import="com.demo.dto.RegisterDTO"%>
<%#page import="java.util.ArrayList"%>
<%#page import="com.model.Student"%>
<%#page import="java.util.List"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootsrtap Free Admin Template - SIMINTA | Admin Dashboad Template</title>
<!-- Core CSS - Include with every page -->
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/main-style.css" rel="stylesheet" />
<!-- Page-Level CSS -->
<link href="assets/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<%List<RegisterDTO> entity = (List<RegisterDTO>)(request.getAttribute("entity")); %>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- navbar top -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<!-- navbar-header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<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" href="index.html">
<img src="assets/img/logo.png" alt="" />
</a>
</div>
<!-- end navbar-header -->
<!-- navbar-top-links -->
<ul class="nav navbar-top-links navbar-right">
<!-- main dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-danger">3</span><i class="fa fa-envelope fa-3x"></i>
</a>
<!-- dropdown-messages -->
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong><span class=" label label-danger">Andrew Smith</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong><span class=" label label-info">Jonney Depp</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong><span class=" label label-success">Jonney Depp</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-messages -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-success">4</span> <i class="fa fa-tasks fa-3x"></i>
</a>
<!-- dropdown tasks -->
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-tasks -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-warning">5</span> <i class="fa fa-bell fa-3x"></i>
</a>
<!-- dropdown alerts-->
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i>New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i>3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i>Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i>New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i>Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-alerts -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-3x"></i>
</a>
<!-- dropdown user-->
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i>User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i>Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i>Logout
</li>
</ul>
<!-- end dropdown-user -->
</li>
<!-- end main dropdown -->
</ul>
<!-- end navbar-top-links -->
</nav>
<!-- end navbar top -->
<!-- navbar side -->
<nav class="navbar-default navbar-static-side" role="navigation">
<!-- sidebar-collapse -->
<div class="sidebar-collapse">
<!-- side-menu -->
<ul class="nav" id="side-menu">
<li>
<!-- user image section-->
<div class="user-section">
<div class="user-section-inner">
<img src="assets/img/user.jpg" alt="">
</div>
<div class="user-info">
<div>Jonny <strong>Deen</strong></div>
<div class="user-text-online">
<span class="user-circle-online btn btn-success btn-circle "></span> Online
</div>
</div>
</div>
<!--end user image section-->
</li>
<li class="sidebar-search">
<!-- search section-->
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!--end search section-->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li class="selected">
<i class="fa fa-dashboard fa-fw"></i>Manage Users
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i>Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris Charts
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-flask fa-fw"></i>Timeline
</li>
<li class="selected">
<i class="fa fa-table fa-fw"></i>Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i>Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i>UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Grid
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i>Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- third-level-items -->
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i>Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- second-level-items -->
</li>
</ul>
<!-- end side-menu -->
</div>
<!-- end sidebar-collapse -->
</nav>
<!-- end navbar side -->
<!-- page-wrapper -->
<div id="page-wrapper">
<div class="row">
<!-- page header -->
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
<!-- end page header -->
</div>
<div class="row">
<form method="post" action="MyServlet">
<input type="hidden" value=1 name="userAction"/>
<input type="submit" name="showData" value="showData"/>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Kitchen Sink -->
<div class="panel panel-default">
<div class="panel-heading">
User Details
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<% if(entity != null){
for(RegisterDTO data:entity){ %>
<tr>
<td><%=data.getId() %></td>
<td><%=data.getFirstName() %></td>
<td><%=data.getLastName() %></td>
<td><%=data.getContact() %></td>
<td><%=data.getEmail() %></td>
</tr>
<% }
}%>
</tbody>
</table>
</div>
</div>
</div>
<!-- End Kitchen Sink -->
</div>
</div>
</div>
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="assets/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="assets/plugins/pace/pace.js"></script>
<script src="assets/scripts/siminta.js"></script>
<!-- Page-Level Plugin Scripts-->
<script src="assets/plugins/dataTables/jquery.dataTables.js"></script>
<script src="assets/plugins/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
</body>
</html>
In this, I also made a dynamic table using scriplet tag.
If you're new, you're going to be exposed to many different approaches to accomplishing the same thing - how to get your Java code to work with other web technologies. IMO, Spring Boot is one of the quickest ways to get started, as #pakOverflow mentions above.
Another great (and simple) intro is from MyKong: https://www.mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/
One (of the many) thing to keep in mind is that you want to separate concerns (see https://en.wikipedia.org/wiki/Separation_of_concerns). In Java, strive to have fairly small, simple objects work together to do interesting things rather than putting all your code in a very small number of classes that do everything.
Below is my code for a nav-bar. Can someone please help me in activating the toggle button. It does not respond on click. I just want it to toggle the content of sidebar-wrapper. I want it to be completely visible and once I click on the button it should disappear and should come back once I hit the toggle button again. Am pretty new to this. Any help is appreciated.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" style="border:none;"><span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button></li>
</ul>
<div style="text-align: center; font-size: 20px; padding-top: 7px;">
<img src="images/logo.png">
<p style="display: inline"><b>Congress API</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: black">
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-stacked" id="menu">
<li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
<a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
</li>
<li onclick="showMainDivision('bills','legislate','committees','favourites')">
<a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
</li>
<li onclick="showMainDivision('committees','bills','legislate','favourites')">
<a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
</li>
<li onclick="showMainDivision('favourites','committees','bills','legislate');">
<a ng-click="getFavourites()" id="fav_load"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
</li>
</ul>
</div>
</div>
</div>
</div>
function toggleDIV(DIV)
{
if(document.getElementById(DIV).style.display=="none")
{
document.getElementById(DIV).style.display="block"
}
else
{
document.getElementById(DIV).style.display="none"
}
}
// use it like:
// onClick="toggleDIV('myDivName')";
In my application a sidebar is there and it toggles when we click on it.Also I want to hide and show some table data but when I add code for this the sidebar doesnot toggle.May I know why this happened.
I want to hide table columns but when I did this my sidebar dropdown stops working.
This code is for sidebar toggle is working fine.
function goToUrl(id)
{
if(user_type_id!=3)
{
if(id==0)
{
$('.hideAndShow').toggle();
document.location="Doctor";//News
}
else
if(id==1)
{
$('.hideAndShow').toggle();
document.location="Device";//cases
}
if(id==2)
{
// $('#addJournals').toggle();
// $('#listingJournals').toggle();
$('.hideAndShow').toggle();
document.location="Associate";//journal
}
if(id==3)
{
$('.hideAndShow').toggle();
document.location="Patient";//gallery
}
}
else
{
if(id==0)
document.location="Doctor";
else
if(id==1)
document.location="Device";
if(id==2)
document.location="Associate";
else
if(id==3)
document.location="Patient";
}
}
<aside class="left-side sidebar-offcanvas" style="min-height: 260px;">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<!-- <div class="user-panel">
<div class="pull-left image">
<img src="img/avatar3.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p id="imageAdmin"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div> -->
<ul class="sidebar-menu">
<!-- <li id='dashboard'>
<a href="/dashboard">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li> -->
<li class='treeview' id='Doctor'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-stethoscope"></i>
<span onclick="goToUrl(0)">Manage Doctor</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDoctor?id=0" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/doctor?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='treeview' id='Device'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-mobile"></i>
<span onclick="goToUrl(1)">Manage Device</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDevice" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/device?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='active' id='Report'>
<a href="/reports">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-list-alt"></i>
<span>Reports</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
but when i add following code sidebar not toggle
$(document).ready(function(){
$("#hi").click(function(){
// $("p").hide();
$('td:nth-child(3)').hide();
});
$("#sh").click(function(){
// $("p").show();
$('td:nth-child(3)').show();
});
});
please help me.