I am trying to implement a solution that required to toggle between 2 independent panels, Sign In and Sign Up.
Each panel should have the following characteristics:
1- They are only displayed when a link in the navbar is clicked;
2- Only 1 of them should be displayed at any given moment, allowing to toggle between the links that activate them;
3- They should have a "X" link at the top right corner that allow to close the panel;
4- Either panel will retract if User click in the page content.
Here's the HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-default">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="home"><!--HOME ANCHOR--></a>
<img src="http://placehold.it/190x40" style="padding-top: 5px;" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="nav navbar-nav navbar-right">
<li><a id="toggleSignInPanel" class="no-border noto-sans" href="#SignInPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign In</a></li>
<li><a id="toggleSignUpPanel" class="no-border noto-sans" href="#SignUpPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign Up</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<br />
<br />
<div id="upper">
<div id="SignInPanel">
<div class="clearfix"></div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6"><h2>Sign In Left Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 1" /></div>
<div class="col-md-6 col-sm-6"><h2>Sign In Right Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 2" /></div>
</div>
<div class="clearfix"></div>
</div>
<div id="SignUpPanel">
<div class="clearfix"></div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6"><h2>Sign Up Left Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div>
<div class="col-md-6 col-sm-6"><h2>Sign Up Right Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="lower">
<p>This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly. This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly.</p>
</div>
Here's the Javascript:
//Toggle Sign In Panel
$(document).ready(function(){
$("#toggleSignInPanel").click(function(){
$("#SignInPanel").slideToggle("slow");
});
});
//Toggle Sign Up Panel
$(document).ready(function(){
$("#toggleSignUpPanel").click(function(){
$("#SignUpPanel").slideToggle("slow");
});
});
This is the JSFiddle that I have have so far: http://jsfiddle.net/UXEngineer/qawccvbs/1/
Would anyone be able to help me out with this issue? Thank you!
The simplest solution would be to just call the api function to close all the other panels every time you toggle a new one open. (Also, you don't need to wrap every function in a new document ready call.)
//Toggle Panel
$(document).ready(function () {
$("#toggleSignInPanel").click(function () {
$("#SignInPanel").slideToggle("slow");
$("#SignUpPanel").slideUp("slow");
});
$("#toggleSignUpPanel").click(function () {
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideToggle("slow");
});
});
here's a new fiddle that closes the other panel when opening a new one:
http://jsfiddle.net/za1L1m77/
[edit:]
closing button is simple, you could just do the same thing as above:
$("#closingButton").click(function () {
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideUp("slow");
});
now, functionality for "click outside" of element is a little trickier because you have to listen to a click event on every element other than the toggles you have. One simple way to do this is to put a "toggle closed" event listener on window as a whole, and stop propogation on your toggle elements. Just keep in mind that you won't be able to put event listeners on parents of elements with stop propogation applied in the future and expect them to work:
$('html').click(function() {
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideUp("slow");
});
plus add this to all the toggles:
$("#toggleSignUpPanel").click(function (e) {
e.stopPropagation();
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideToggle("slow");
});
Related
I'm working on tabs I want multiple tabs on the same page and I don't want to change id's for the next tab because I have to pass dynamically. I tried using id same id's which are the conflict with each other. Can anyone suggest me. So, far I tried.
function atscTabs() {
$('.at-tabs-nav__item').click(function() {
var tab = $(this).data('tab');
$('.at-tab-__title_text').removeClass('current');
$('.at-tabs-nav__item').removeClass('current');
$(this).addClass('current');
$("#" + tab).addClass('current');
})
}
atscTabs();
.current {
color: white;
padding: 5px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current" data-tab="tab-1">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-2">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-3">Tab #3</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item" id="tab-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-2">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-3">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
Hi i have created small script to solve your problem. I hope this will help.
function atscTabs() {
$('.at-tabs').each(function(index, item){
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content =$(this).find('.at-tabs-content__item');
$content.hide();
$label.each(function(idx, ele){ $(this).attr('data-target', idx)});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
$menuContainer.click(function(ele){
$($mainContainer).find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$($mainContainer)
.find('.at-tabs-content .at-tabs-content__item')
.hide()
.eq(parseInt($(this).find('[data-target]')
.attr('data-target'))).show();
});
});
}
atscTabs();
Let me know if still need help. Avoid using one id multiple places.
FYI: https://stackoverflow.com/a/14446052/5011051
I am using below function to search in articles.html - My search bar is in the home page (index.html).
<div id="tfheader">
<form id="tfnewsearch" method="get" action="articles.html">
<input type="text" class="tftextinput" id="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<script>
var a = document.getElementById('tfnewsearch');
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html'+b;
});
</script>
My requirement is when i type some character in search bar and hit enter. It will redirect me to article.html and search through whole content of article.html
Thanks for the help
<!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>Gomac Knowledgebase</title>
<!-- LOADING STYLESHEETS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid featured-area-white-border">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="login-box border-right-1">
<i class="fa fa-key"></i> Login
</div>
<div class="login-box border-left-1 border-right-1">
<i class="fa fa-pencil"></i> Sign Up
</div>
</div>
</div>
</div>
</div>
<!-- LOGO -->
<div class="container">
<div class="row">
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
</div>
</div>
</div>
<!-- END LOGO-->
<!-- TOP NAVIGATION -->
<div class="container-fluid">
<div class="navigation">
<div class="row">
<ul class="topnav">
<li></li>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-book"></i> Knowledge Base</li>
<li><i class="fa fa-file-text-o"></i> Articles</li>
<li><i class="fa fa-lightbulb-o"></i> FAQ</li>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
</div>
<!-- END TOP NAVIGATION -->
<!-- SEARCH FIELD AREA -->
<div class="searchfield bg-hed-six">
<div class="container" style="padding-top: 20px; padding-bottom: 20px;">
<div class="row text-center margin-bottom-20">
<h1 class="white"> Knowledge Base</h1>
<span class="nested"> Learn to use gomac </span>
</div>
<br>
<div class="row search-row">
<input type="text" class="search" placeholder="What do you need help with?">
<button class="buttonsearch btn btn-info btn-lg">Search</button>
</div>
</div>
</div>
<!-- END SEARCH FIELD AREA -->
<!-- MAIN SECTION -->
<div class="container featured-area-default padding-30">
<div class="row">
<!-- ARTICLE OVERVIEW SECTION -->
<div class="col-md-8 padding-20">
<div class="row">
<!-- BREADCRUMBS -->
<div class="breadcrumb-container">
<ol class="breadcrumb">
<li><i class="fa fa-home"></i></li>
<li class="active">All Articles</li>
</ol>
</div>
<!-- END BREADCRUMBS -->
<!-- ARTICLES -->
<div class="fb-heading">
All Articles
</div>
<hr class="style-three">
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to change account password?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Account Settings </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 4 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to change currency in gomac?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Admin Panel </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 10 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to edit order details?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Orders </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 0 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to print stock barcode?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Stocks </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 12 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to generate barcode?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Stocks </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 7 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<!-- END ARTICLES -->
<!-- PAGINATION -->
<nav class="text-center">
<ul class="pagination">
<li class="disabled">
<span aria-hidden="true"><i class="fa fa-arrow-circle-left"></i> Previous</span>
</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li class="enabled">2 <span class="sr-only">(current)</span></li>
<li class="enabled">3 <span class="sr-only">(current)</span></li>
<li class="enabled">
<span aria-hidden="true">Next <i class="fa fa-arrow-circle-right"></i></span>
</li>
</ul>
</nav>
<!-- END PAGINATION -->
</div>
</div>
<!-- END ARTICLES OVERVIEW SECTION-->
<!-- SIDEBAR STUFF -->
<div class="col-md-4 padding-20">
<div class="row margin-bottom-30">
<div class="col-md-12 ">
<div class="support-container">
<h2 class="support-heading">Need more Support?</h2> If you cannot find an answer in the knowledgebase, you can contact us for further help.
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <i class="fa fa-file-text-o"></i> How to change account password? </li>
<li> <i class="fa fa-file-text-o"></i> How to edit order details? </li>
<li> <i class="fa fa-file-text-o"></i> Add new user </li>
<li> <i class="fa fa-file-text-o"></i> Change customer details </li>
<li> <i class="fa fa-file-text-o"></i> Lookup existing customer in order form </li>
</ul>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Latest Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <i class="fa fa-file-text-o"></i> How to change username? </li>
<li> <i class="fa fa-file-text-o"></i> How to change currency in gomac? </li>
<li> <i class="fa fa-file-text-o"></i> How to edit order details? </li>
<li> <i class="fa fa-file-text-o"></i> How to print stock barcode? </li>
<li> <i class="fa fa-file-text-o"></i> How to generate barcode? </li>
</ul>
</div>
</div>
</div>
<!-- POPULAR TAGS (SHOW MAX 20 TAGS) -->
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Tags
</div>
<hr class="style-three">
<div class="fat-content-tags padding-left-10">
password
settings
sign up
currency
payment
user
database
storage
export
email
import
campaign
edit
orders
help
billing
user
configure
customer
</div>
</div>
</div>
<!-- END POPULAR TAGS (SHOW MAX 20 TAGS) -->
</div>
<!-- END SIDEBAR STUFF -->
</div>
</div>
<!-- END MAIN SECTION -->
<!-- FOOTER -->
<div class="container-fluid footer marg30">
<div class="container">
<!-- FOOTER COLUMN ONE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">How it works</div>
<div class="footer-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
<!-- END FOOTER COLUMN ONE -->
<!-- FOOTER COLUMN TWO -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Categories</div>
<div class="footer-body">
<ul>
<li> General </li>
<li> Getting Started </li>
<li> Account Support </li>
<li> Guides </li>
<li> Payment & Billing </li>
<li> Misc </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN TWO -->
<!-- FOOTER COLUMN THREE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Popular Articles</div>
<div class="footer-body">
<ul>
<li> How to change account password </li>
<li> How to edit order details </li>
<li> Add new user </li>
<li> Change customer details </li>
<li> Lookup existing customer in order form </li>
<li> How do I reset my password </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN THREE -->
</div>
</div>
<!-- END FOOTER -->
<!-- COPYRIGHT INFO -->
<div class="container-fluid footer-copyright marg30">
<div class="container">
<div class="pull-left">
Copyright © 2016 Sunny Gohil</a>
</div>
<div class="pull-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</div>
<!-- END COPYRIGHT INFO -->
<!-- LOADING MAIN JAVASCRIPT -->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='https://cdn.rawgit.com/VPenkov/okayNav/master/app/js/jquery.okayNav.js'></script>
</body>
</html>
Above is the html for articles.html
First - Parse the string from url an then search it in the document.
var a = document.getElementById('tfnewsearch');
if(a){
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html?'+b;
});
}
// var queryString = url.substring( url.indexOf('?') + 1 );
var queryString = window.location.search;
queryString = queryString.substring(1);
function myFunction() {
// Declare variables
var para, filter, ul, li, anchor;
para = document.getElementById('block-with-text');
filter = queryString.toUpperCase();
anchor = document.getElementById("anchor");
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
p = li[i].getElementsByTagName("p")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else if (p.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
myFunction();
What i would like, i click on a link, and a div before this shows or hides, ive tried .prev() and .before() but i do not think i am using them correctly. The code is only part of it, the same code is repeated using owl carousel.
What is happening is all the classes are showing it, not just the 1 item.
So when i click on the showMore button, i want only the previous class: moreInfo to show / hide.
$('.showMore').click(function() {
var information = $('.moreInfo');
if (information.is(":hidden")) {
information.slideDown("slow");
} else {
information.slideUp("slow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<span>
<img src="owl1.jpg">
<p class="title">Owl</p>
<div class="moreInfo">
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat urna arcu, vel molestie nunc commodo non. Nullam vestibulum odio vitae fermentum rutrum.</p>
</div>
<div class="youtube">
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="buttons">
<i class="fa fa-arrow-down"></i>
</div>
</span>
</div>
Thanks
You need to go up one to the button DIV and then go to the previous DIV to reach the corresponding moreInfo DIV.
var information = $(this).closest(".buttons").prev(".moreInfo");
Here's the whole updated code:
$('.showMore').click(function() {
var information = $(this).closest(".buttons").prev(".moreInfo");
if (information.is(":hidden")) {
information.slideDown("slow");
$(this).find("i").text("Show less");
} else {
information.slideUp("slow");
$(this).find("i").text("Show more");
}
});
.moreInfo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<span>
<p class="title">Owl</p>
<div class="moreInfo">
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat urna arcu, vel molestie nunc commodo non. Nullam vestibulum odio vitae fermentum rutrum.</p>
</div>
<div class="youtube">
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="buttons">
<i class="fa fa-arrow-down">Show more</i>
</div>
</span>
</div>
I am writing a large website and I got stuck referencing a small navigation bar. I am using Twitter Bootstrap.
I'm sure I'm missing something novice. This is the JsFiddle: http://jsfiddle.net/ugdh2jmL/2/. I'm going to be referencing a series of dynamically loaded list objects. I can add them easily but I'm having issues declaring an onclick event; nothing happens, no message, nothing.
Here are the snippets:
$('.list-group').on('click', '.list-group-item', function(e) {
alert('success');
}):
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
</div>
</div>
<!-- /.col-sm-4 -->
For code to trigger you need to include jquery library as well.
I have also updated fiddle.
$(document).ready(function(){
$(document).on('click', '.list-group', function(e){
alert('success');
});
});
http://jsfiddle.net/ugdh2jmL/3/
Missing jQuery and : should be ;
$('.list-group').on('click', '.list-group-item', function(e) {
alert('success');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
</div>
</div>
<!-- /.col-sm-4 -->
I am building a website which is in need of dynamic deletion of tables. I am using Bootstrap for the CSS and JQuery 1.11.2 as the brains. I am also using Parse.com but all that is working fine on all my other pages. The issue is not with loading any of my JQuery code, but the activation of this specific role in deleting a given row without knowing the ID.
I hid the 'page' called "Create Bowls" but it can be access by clicking on the right hand navigation bar.
I should be able to click on this delete button and the row be removed accordingly.
The HTML I am working with is this:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Off Canvas Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom/dashboardMain.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- navigation bar at the top -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="" id="dashboard_home_title_link">DePauw Prindle Ethics Bowls</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
<li>Log Out</li>
</ul>
<!--<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form> -->
</div>
</div>
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<!-- Giant intro -->
<div class="jumbotron">
<h1 id="dashboard_title_intro"></h1>
<p>Take a look around. Here you can coordinate ethics bowl with the simplicity and power of our web application.</p>
</div>
<!-- HOME CONTENT -->
<div class="row" id="dashboard_content_home">
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
<!-- Ethic bowl CONTENT -->
<div class="row" id="dashboard_ethic_bowls">
<div class="row placeholders">
<div class="col-md-12 text-center">
<h1>Ethic Bowls</h1>
<button type="button" class="btn btn-lg btn-info" id="dashboard_add_ethic_bowl"> + </button>
</div>
</div>
<!-- the list of ethic bowls for a given user -->
<div class="table-responsive foo">
<table class="table table-striped" id="dashboard_ethic_bowl_list">
<thead>
<tr>
<th>Title</th>
<th>Location</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="dashboard_ethic_bowl_rows">
<tr>
<td>tempTitle</td>
<td>tempLocation</td>
<td>tempDate</td>
<td>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;">
<span>Actions</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;">
<li><button class="btn btn-primary">View</button></li>
<br>
<li><button class="btn btn-warning">Edit</button></li>
<br>
<li><button class="btn btn-danger" id="deleteBowl">Delete</button></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div><!--/dashboard_ethic_bowl_list-->
</div><!--/dashboard_ethic_bowls-->
</div><!--/.col-xs-12.col-sm-9-->
<!-- left side navigation bar for content area -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
Home
Create Bowls
</div>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
<hr>
<footer>
<p>© DePauw University 2015</p>
</footer>
</div><!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<script src="js/parse/dashboardMainjs.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The problem is when I try to click on Actions -> Delete in the row, it does nothing. I am trying to use $(this).closest('tr').remove(); but part of the problem is that it never seems to be called despite referencing the proper generic ID. Am I referencing it wrong or something? I am dynamically adding rows with the onclick function "#dashboard_add_ethic_bowl".
$(function()
{
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
$("#dashboard_nav_home").click(function(event)
{
// http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
event.preventDefault();
showHome();
hideAddCoachSchool();
});
$("#dashboard_nav_ethic_bowls").click(function(event)
{
event.preventDefault();
$("#dashboard_content_home").hide();
$("#dashboard_ethic_bowls").show();
});
// TODO: these arent working yet
// http://stackoverflow.com/questions/23249130/delete-table-row-using-jquery
$(".btn btn-danger").click(function(){
alert('awwwwww');
});
$('#deleteBowl').click(function (event) {
event.preventDefault();
alert("aa");
$(this).closest('tr').remove();
return false;
});
$("#dashboard_add_ethic_bowl").click(function(event)
{
event.preventDefault();
var rowContent = '<tr>' +
'<td>' + 'tempTitle' + '</td>' +
'<td>' + 'tempLocation' + '</td>' +
'<td>' + 'tempDate' + '</td>' +
'<td>' +
'<div class="btn-group">' +
'<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;">' +
'<span>Actions</span> <span class="caret"></span>' +
'</button>' +
'<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;">' +
'<li><button class="btn btn-primary">View</button></li>' +
'<br>' +
'<li><button class="btn btn-warning">Edit</button></li>' +
'<br>' +
'<li><button class="btn btn-danger" id="deleteBowl">Delete</button></li>' +
'</ul>' +
'</div>' +
'</td>' +
'</tr>';
$("#dashboard_ethic_bowl_list").show();
$('#dashboard_ethic_bowl_rows').append(rowContent);
});
// declare simple log out
$("#dashboard_log_out").click(function(event)
{
event.preventDefault();
});
}
function hideHome()
{
$("#dashboard_content_home").hide();
}
function showHome()
{
$("#dashboard_content_home").show();
}
function hideAddCoachSchool()
{
$("#dashboard_ethic_bowls").hide();
}
function showAddCoachSchool()
{
$("#dashboard_ethic_bowls").show();
}
EDIT: I just tried now with a hardcoded row inside the HTML which works with the onclick and removal but not if I add them dynamically by clicking on the big "+" button. Is there a proper way to reference a dynamically added row to be deleted?
Use event delegation for dynamically created elements:
$('#dashboard_ethic_bowl_list').on('click','.btn', function(event){
event.preventDefault();
alert("aa");
$(this).closest('tr').remove();
return false;
});
Also use UNIQUE IDs.
Your id="deleteBowl" is repeated each time you add a new row dynamically. ID needs to be UNIQUE. Better make it a class and use it.
...<li><button class="btn btn-danger deleteBowl">...
^^^^^^^^^
$('#dashboard_ethic_bowl_list').on('click','.deleteBowl', function(event){
event.preventDefault();
alert("aa");
$(this).closest('tr').remove();
return false;
});
" I just tried now with a hardcoded row inside the HTML which works
with the onclick and removal but not if I add them dynamically by
clicking on the big "+" button. Is there a proper way to reference a
dynamically added row to be deleted?"
The events seems not to be added to these new elements. When creating them, you can add the event that permits their selection/deletion.