I am learning jquery, and need your help. I want to reduce the number of codes here:
I have three buttons on navbar. cart, .account, .help. If I click on cart, I want to hide dropdown menu for account and help. Same goes for other buttons. Here is the jquery code, I have written so far! Could anyone help me to reduce the number of lines of code?
Jquery Code:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>
Hello You can reduce it like this
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});
Related
guys, I am trying to get my hamburger button to work but nothing is happening does anyone have any advice?
here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
<title>David Underwood</title>
</head>
<body>
<header>
<a href="/" class="header-logo">
<h3>Welcome</h3>
</a>
<nav>
<img class="union" src="Union.png" alt="menu link" />
</nav>
</header>
<div class="greet">
<div class="top-row-one">
<h2 class="porto">Portoflio</h2>
<h3 class="about-top">About</h3>
<h4 class="con">Contact</h4>
</div>
<div class="text-box">
<h1 class="hi-there">Hey there. I’m <br />David</h1>
<h2 class="hi-there2">
I’m a software <br />
developer
</h2>
</div>
<div class="greeting2">
<h1 class="header-title">Hey there. I’m David.</h1>
<h1>
<span>I’m a software developer</span>
</h1>
</div>
<p class="paragraph1">
I can help you build a product, <br />
feature or website Look through <br />
some of my work and experience! <br />
If you like what you see and have <br />
a project you need coded, <br />
don’t hestiate to contact me.
</p>
<div class="para-box">
<p class="paragraph2">
I can help you build a product , feature or website Look through some
of my work and <br />
experience! If you like what you see and have a project you need
coded, <br />
don’t hestiate to contact me.
</p>
</div>
<div class="icons">
<ul class="icon-row">
<li>
<a href="https://twitter.com/david630"
><img class="tweet" src="twitter.svg" alt="twitter picture"
/></a>
</li>
<li>
<img class="med" src="medium.svg" alt="medium picture" />
</li>
<li>
<a href="https://github.com/david63011"
><img class="git" src="github.svg" alt="git picture"
/></a>
</li>
<li>
<img class="angel" src="angellist.svg" alt="angelist picture" />
</li>
</ul>
</div>
<div class="top-info">
<h1 class="works">
My Recent <br />
Works
</h1>
<img class="Indicator" src="Indicator.png" alt="green line" />
</div>
</div>
<h2 class="works2">My Recent Works</h2>
<section class="grid-containers">
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
</section>
<div class="picture-box">
<section class="about">
<div class="about-me">About Me</div>
</section>
<section class="text-box1">
<div class="text-info1">
<p class="p2">
I can help you build a product, <br />
feature or website Look through <br />
some of my work and experience! If <br />
you like what you see and have a <br />
project you need coded, <br />
don’t hestiate to contact me.
</p>
</div>
</section>
<section class="text-box2">
<div class="text-info2">
<h2 class="text1a">
I can help you build a product , feature or website Look through
some of my work and
</h2>
<h3 class="text-info2b">
experience! If you like what you see and have a project you need
coded,
</h3>
<h4 class="text-info3c">don’t hestiate to contact me.</h4>
</div>
</section>
</div>
<button type="submit" class="resume-btn">Get My Resume</button>
<section class="new-end-section">
<ul class="about-me-end-section">
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="ball.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Languages</h2>
<ul class="cat-things">
<li>JavaScript</li>
<li>Ruby</li>
<li>Html</li>
<li>CSS</li>
</ul>
</div>
</li>
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="frame.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Frameworks</h2>
<div>
<ul class="cat-things">
<li>Bootstrap</li>
<li>Ruby on rails</li>
<li>RSpec</li>
<li>Capybara</li>
<li>Selenium</li>
</ul>
</div>
</div>
</li>
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="ball.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Skills</h2>
<ul class="cat-things">
<li>Codekit</li>
<li>Github</li>
<li>CodePen</li>
<li>GitLab</li>
<li>Terminal</li>
</ul>
</div>
</li>
</ul>
</section>
<footer class="contactpage">
<section class="projects-end">
<h2 class="textline1">I'm always</h2>
<h3 class="textline2">interested in</h3>
<h4 class="textline3">hearing about</h4>
<h5 class="textline4">new projects, so</h5>
<h6 class="textline5">if you'd like to</h6>
<h6 class="textline6">chat please get</h6>
<h6 class="textline7">in touch</h6>
</section>
<section class="projects-2-big">
<div class="new-paragraph">
I'm always interested in hearing about new projects, so if you'd like
to chat please get in touch.
</div>
</section>
<section class="form-section">
<div class="form-container">
<form action="https://formspree.io/f/myyvzkag" method="post">
<ul class="form-info">
<li>
<input
type="text"
maxlength="30"
name="user_name"
class="name-text-box"
id="full-name"
placeholder="Full Name"
required=""
/>
</li>
<li>
<input
type="email"
name="user_email"
class="name-last-text-box"
id="email"
placeholder="Email Address"
required=""
/>
</li>
<li>
<textarea
id="text-box"
name="message"
maxlength="500"
class="enter-form"
cols="30"
rows="10"
placeholder="Enter text here"
required=""
></textarea>
</li>
</ul>
</form>
<input type="submit" value="Get in touch" class="send-btn" />
</div>
<button type="submit" class="touch-btn2">Get in touch</button>
<img class="rec" src="rec.png" alt="long line" />
</section>
<div class="icon-row-footer">
<div class="tweet-connect">
<a href="https://twitter.com/david630"
><img class="tweet" src="twitter.svg" alt="twitter picture"
/></a>
</div>
<img class="med" src="medium.svg" alt="medium picture" />
<div>
<a href="https://github.com/david63011"
><img class="git" src="github.svg" alt="git picture"
/></a>
</div>
<img class="angel" src="angellist.svg" alt="angelist picture" />
</div>
<p class="email">david630#gmail.com</p>
<div class="black">
<img class="Indicator2" src="Indicator.png" alt="green line" />
</div>
</footer>
<!--Footer section end-->
<!--overlay section start-->
<div class="over">
<div class="cancel">
<img src=cancel.png alt="close-icon-button">
</div>
<ul class="main-overlay-menu">
<li>
<a class="menu-item" href="#grid-containers">Portofolio</a>
</li>
<li>
<a class="menu-item" href="#about">About</a>
</li>
<li>
<a class="menu-item" href="#contactpage">Contact</a>
</li>
</ul>
</div>
</body>
</html>
Javascript
const hamburger = document.querySelector('.union');
const overlay = document.querySelector('.over');
const menu = document.querySelector('.main-overlay-menu');
hamburger.addEventListener('click', () => {
overlay.style.display = 'flex';
menu.style.display = 'block';
});
When I click the hamburger icon nothing happens. And I don't know why so any help would be appreciated. I think the javascript is ok but maybe its now so any help on that area would also be apprecaited
you can try to using getElemantById or className.
I have created dynamic list using bootstrap and thymeleaf, list also contains collapse functionality which is not working properly, aria-expanded = "false" is not working, I browsed a lot but not any solution for dynamically created list using thymeleaf.
When the page loads all collapsible panel should be closed for that I used aria-expanded="false", but it is not working.
As the list comes into from it takes few clicks to achieve collapse.
Below there is the code and image.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/resources/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/resources/css/style.css" rel="stylesheet">
<link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="/resources/css/icheck.css" rel="stylesheet" />
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="/resources/css/sweet-alert.css" rel="stylesheet" />
<link href="/resources/css/custom-accordin.css" rel="stylesheet" />
</head>
<body>
<div class="container" th:fragment="content">
<header>
<!--Main Navigation-->
<nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item"><i class="fa fa-bars fa-2x"></i></li>
</ul>
</nav>
</header>
<!--Main Navigation-->
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<div class="col-12">
<div class="mx-auto">
<div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
<div class="row">
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
<small>Submission Period</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${#codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
<small>Pay Frequency</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
<small>Pension Prov.</small></p>
</div>
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
Amount Due to Pension provider: <strong>£ 40.72</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group" >
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
<li class="list-group-item">
<div class="card" th:each="listBean,iterator: ${contributionStatus}" >
<div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
<div class="row">
<div class="col-7"> <span class="icon-round pull-left">
<p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
</span>
<p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
<p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
</div>
<div class="col-4 pr-0">
<p class="h5 list-group-item-heading text-right"><span class="float-left">£</span><span th:text="${listBean.eePenEarnings}"></span></p>
</div>
</div>
</a> </div>
<div th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx" th:attr="aria-labelledby='heading' + ${iterator.index}">
<div class="card-body black-text">
<p class="h6">Pensionable Earnings: £ <span th:text="${listBean.eePenEarnings}"></span></p>
<ul class="list-group" >
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employer</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.erDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employee</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item grey lighten-4">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">£</span><span th:text="${listBean.erContribution}"></span></strong></p>
</div>
</div>
</li>
</ul>
<ul class="list-group mt-4" aria-hidden="true">
<li class="list-group-item grey lighten-3">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Reason</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Effective Date</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<!--/.Card-->
</div>
</div>
</div>
<!--Main container-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" th:src="#{/resources/js/jquery.3.2.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" th:src="#{/resources/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/mdb.min.js}"></script><!--
<script type="text/javascript" th:src="#{/resources/js/thymol.js}"></script>
<script type="text/javascript" th:src="#{/resources/js/thymolconfig.js}"></script> -->
<script type="text/javascript" th:src="#{/resources/js/custom.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/moment.2.10.6.min.js}"></script>
<!-- SCRIPTS -->
<!-- <!-- thymol JavaScript -->
<script th:src="#{/resources/js/main.js}"></script>
<script th:src="#{/resources/js/sweet-alert.min.js}"></script>
<script th:src="#{/resources/js/utils.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/date.js}"></script>
<script th:src="#{/resources/js/icheck.min.js}"></script>
<script th:src="#{/resources/js/dynamicFormFields.js}"></script>
<script th:src="#{/resources/js/moment.js}"></script>
<script th:src="#{/resources/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="#{/resources/js/jquery.qtip.min.js}"></script>
<script th:src="#{/resources/js/bc-quicklink.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// SideNav Initialization
$(document).ready(function () {
$(".button-collapse").sideNav({
edge: 'right',
closeOnClick: true
});
var container = document.getElementById('slide-out');
Ps.initialize(container);
});
</script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
/*]]>*/
</script>
</div>
</body>
</html>
Help me to solve the problem.
Lets say this is my HTML
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
</ul>
Now I want to wrap .product-thumbnail and .product-price in
<div class="left"></div>
Like this
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
</ul>
This code does the trick if I had only one list item
$(".product-thumbnail, .product-price").wrapAll("<div class='left'></div>");
I've tried an each() on .product-thubnail and .product-price but without results..
Does anyone know how I could do this or how it could be done with each()?
Iterate over the .product-title using each() method and combine with the immediate next element using add() method.
$('.product-title').each(function() {
$(this).add($(this).next()).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
Or iterate over the li and get both classes within the element by providing the context.
$('.product').each(function() {
$('.product-title,.product-thumbnail', this).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
i want to display the data in tabs , but here my data is displaying in single tab.
some one please help me out .
</head>
<body>
<div id='childarpt' class='childarpt'>
</br>
<div id="tabs">
<ul>
<li class="active "><span>Total</span></li>
<li><span>USA</span></li>
<li><span>ASIA</span></li>
<li><span>JAPAN</span></li>
<li><span>LATAM</span></li>
<li><span>EMEA</span></li>
</ul>
<table id='myTable' border='0'>
<div id="Total " class="tab active ">
Total
</div>
<div id="USA " class="tab ">
USA
</div>
<div id="ASIA " class="tab ">
ASIA
</div>
<div id="JAPAN " class="tab ">
JAPAN
</div>
<div id="LATAM " class="tab ">
LATAM
</div>
<div id="EMEA " class="tab ">
EMEA
</div>
</table>
</div>
</div>
<script>
$("#tabs ").tabs();
</script>
</body>
</html>
here all the div data is displaying in the first tab , remaining div data is not hiding .
$( "#tabs" ).tabs();
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id='childarpt' class='childarpt' ></br>
<div id="tabs"><ul>
<li class="active"><span>Total</span></li>
<li><span>USA</span></li>
<li><span>ASIA</span></li>
<li><span>JAPAN</span></li>
<li><span>LATAM</span></li>
<li><span>EMEA</span></li>
</ul>
<table id='myTable' border='0'>
<div id="Total" class="tab active">
Total
</div>
<div id="USA" class="tab">
USA
</div>
<div id="ASIA" class="tab">
ASIA
</div>
<div id="JAPAN" class="tab">
JAPAN
</div>
<div id="LATAM" class="tab">
LATAM
</div>
<div id="EMEA" class="tab">
EMEA
</div>
</table>
</div>
Include jquery-lastest.js and jquery-ui.js file. DEMO HERE
I'm building a site using a template and I think something is interfering with .hide() or .fadeIn(). When I click the image here.
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
nothing happens. It won't disappear or do anything. Also I know menu.js is being detected because I can document.write() and it works and also console.log works in F12 developer tools
Menu.js
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
The image I'm trying to click is under
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/form.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/forms.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script type="text/javascript" src="/js/jssor.slider.mini.js"></script>
<script>
$(document).ready(function(){
$('.slider_wrapper')._TMS({
show:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:800,
preset:'fade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:8000,
numStatus:false,
banners: 'fade',
waitBannerAnimation:false,
progressBar:false
});
});
$(document).ready(function(){
!function(){
var map=[]
,names=[]
,win=$(window)
,header=$('header')
,currClass
$('.content').each(function(n){
map[n]=this.offsetTop
names[n]=$(this).attr('id')
})
win
.on('scroll',function(){
var i=0
while(map[i++]<=win.scrollTop());
if(currClass!==names[i-2])
currClass=names[i-2]
header.removeAttr("class").addClass(names[i-2])
})
}(); });
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
$(document).ready(function(){
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="">
<!--==============================header=================================-->
<header class="page1">
<div class="container_12">
<div class="grid_12">
<div id="logoImage1"><img src="SleepingMoonImages/sleepingmoonwhite.png" alt=""/></div>
<div id="logoImage"><img src="images/logo.png" alt=""/> </div>
<!--<h1><img src="images/logo.png" alt="Gerald Harris attorney at law" height="50" width="1600"/></h1>-->
<div class="menu_block">
<nav class="">
<ul class="sf-menu">
<li class="current men"><a onClick="goToByScroll('page1'); return false;" href="#">Home </a> <strong class="hover"></strong></li>
<li class="men1"><a onClick="goToByScroll('page2'); return false;" href="#">Menu</a><strong class="hover"></strong></li>
<li class=" men2"><a onClick="goToByScroll('page3'); return false;" href="#">Events</a> <strong class="hover"></strong></li>
<li class=" men3"><a onClick="goToByScroll('page4'); return false;" href="#">Hours & Location</a> <strong class="hover"></strong></li>
<!--<li class=" men4"><a onClick="goToByScroll('page5'); return false;" href="#">Contact Us</a> <strong class="hover"></strong></li>-->
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!--=======content================================-->
<div id="page1" class="content">
<div class="ic">More Website Templates # TemplateMonster.com - September 9, 2013!</div>
<div class="container_12">
<div class="grid_12">
<div style="min-height: 50px;">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="display: none; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
...
</div>
<!-- Jssor Slider End -->
</div>
<div class="slider_wrapper">
<ul class="items">
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Let Us Show You the Way to Success</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Interminable Energy for Your Project</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>We know how to solve your problems!</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Make your business a booming one!</h2>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Our Menu</h3>
</div>
</div>
</div>
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
</div>
<div id="page3" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Upcoming Events</h3>
<div class="text1">
Events Information Text TBA
</div>
</div>
</div>
</div>
</div>
<div id="page4" class="content">
<div class="container_12">
<div class="grid_12">
<h3>Hours & Location</h3>
</div>
<div class="companies">
<div class="clear"></div>
</div>
</div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="container_12">
<div class="grid_12">
<div class="copy">
</div>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>
You need to put your JS code in a Document Ready function because it is executing before the page loads.
The solution:
http://jsfiddle.net/m2sv4t7q/
$("document").ready(function {
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
});
Adding that function allows the full html of the page to load before executing your javascript.