I have this as my jQuery
$(".part-txt").click(function() {
$('.txt-container').toggleClass("hide");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
Basically my problem is I would like to click the .part-txt div and showing .txt-container div without affecting other divs with the same class. Sorry beginner here.
You could use nextAll() to select the next txt-container element related with the current clicked part-txt, like :
$(".part-txt").click(function() {
$(this).nextAll('.txt-container').toggleClass("hide");
});
Hope this helps.
$(".part-txt").click(function() {
$(this).nextAll('.txt-container').toggleClass("hide");
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
Find it by its parent
$(".part-txt").click(function() {
$(this).parent().find('.txt-container').toggleClass("hide");
});
You can use pseudo select as such
$(".part-txt").click(function() {
$(".txt-container:first").toggleClass("hide");
});
Related
I'm trying to make a blog thumbnail and blog content with blog content input.
I have blog input form and the thumbnail on the same page, here's the code for the page:
let blogs = []
let month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
]
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage").files[0]
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
inputImage = URL.createObjectURL(inputImage)
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
renderCard()
}
function renderCard() {
let containerBlog = document.getElementById("contents")
containerBlog.innerHTML = '';
const objectBlogString = JSON.stringify(blogs);
for (let i = 0; i < blogs.length; i++) {
localStorage.setItem(`${blogs[i].title}`, objectBlogString);
containerBlog.innerHTML += `
<div id="contents" class="mp-card">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="${blogs[i].image}" alt="">
</div>
<div class="mpc-title">
<a href="blog-detail.html" onclick="renderBlog(event)" id='${blogs[i].title} action="blog-detail.html"'>
<p>${blogs[i].title}</p>
</a>
</div>
<div class="mpc-duration">
<small>Durasi: 1 Bulan</small>
</div>
<div class="mpc-content">
${blogs[i].content}
</div>
<div class="mpc-icons">
${(blogs[i].icons.html === true) ? '<i class="fa-brands fa-html5"></i>' : ''}
${(blogs[i].icons.css === true) ? '<i class="fa-brands fa-css3-alt"></i>' : ''}
${(blogs[i].icons.nodeJs === true) ? '<i class="fa-brands fa-node-js"></i>' : ''}
${(blogs[i].icons.reactJs === true) ? '<i class="fa-brands fa-react"></i>' : ''}
</div>
<div class="mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
`
}
}
function renderBlog(event) {
let keyName;
if (event) {
keyName = event.path[1].id;
const myProjectBody = document.getElementById('myProjectBody');
const data = JSON.parse(localStorage.getItem(keyName))
myProjectBody.innerHTML = '';
for (let i = 0; i < data.length; i++) {
myProjectBody.innerHTML += `
<div id="blog-detail">
<!--BD = Blog Detail-->
<div class="bd-title">
<p>${data[i].title}</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class="bd-idc">
<div class="idc-left">
<img src="${data[i].image}" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div style="padding-left: 2px;">
<i class="fa-solid fa-calendar-days"></i>
<p>1 Jan 2022 - 1 Aug 2022</p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p>8 Month</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="tech-body">
${(data[i].icons.html === true) ? '<div class="tech-html"><i class="fa-brands fa-html5"></i><p>HTML</p></div>' : ''}
${(data[i].icons.css === true) ? '<div class="tech-css"><i class="fa-brands fa-css3-alt"></i><p>CSS</p></div>' : ''}
${(data[i].icons.nodeJs === true) ? '<div class="tech-node"><i class="fa-brands fa-node-js"></i><p>nodeJs</p></div>' : ''}
${(data[i].icons.reactJs === true) ? '<div class="tech-react"><i class="fa-brands fa-react"></i><p>reactJs</p></div>' : ''}
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
${data[i].content}
</p>
</div>
</div>
`
}
}
}
<!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">
<title>My Project</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<!-- NAVBAR -->
<nav>
<div class="nav-left">
<img src="assets/logo.png" alt="">
<ol>
<li>
Home
</li>
<li>
My Project
</li>
</ol>
</div>
<div class="nav-right">
Contact me
</div>
</nav>
<!--xNAVBARx-->
<div id="myProjectBody">
<!--MPI = My Project Input-->
<div class="mpi-title">
<p>ADD BLOG</p>
</div>
<!--Form-->
<div class="mpi-form-container">
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)" action="blog-detail.html">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
<!--xFormx-->
<!--My Project-->
<div class="mp-container">
<div class="mp-title">
<p>MY PROJECT</p>
</div>
<div id="contents" class="mp-card-container">
<div class="mp-card">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="assets/DWB.png" alt="">
</div>
<div class="mpc-title">
<a href="blog-detail.html">
<p>Dumbways Bootcamp 2022</p>
</a>
</div>
<div class="mpc-duration">
<small>Durasi: 3 Bulan</small>
</div>
<div class="mpc-content">
content
</div>
<div class="mpc-icons">
<i class="fa-brands fa-html5"></i>
<i class="fa-brands fa-css3-alt"></i>
<i class="fa-brands fa-node-js"></i>
<i class="fa-brands fa-react"></i>
</div>
<div class="mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
</div>
<!--xMy Projectx-->
</div>
<script src="js/blog.js"></script>
</body>
</html>
and here's the blog detail page that will show all of the input value that I submit:
<!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">
<title>Blog detail</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<!-- NAVBAR -->
<nav>
<div class="nav-left">
<img src="assets/logo.png" alt="">
<ol>
<li>
Home
</li>
<li>
My Project
</li>
</ol>
</div>
<div class="nav-right">
Contact me
</div>
</nav>
<!--xNAVBARx-->
<!--Blog Detail-->
<div id="blog-detail">
<!--BD = Blog Detail-->
<div class="bd-title">
<p>Blog Title</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class="bd-idc">
<div class="idc-left">
<img src="assets/DWB.png" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div style="padding-left: 2px;">
<i class="fa-solid fa-calendar-days"></i>
<p>10 May 2022 - 10 Jul 2022</p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p>3 Month</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="tech-body">
<div class="tech-html">
<i class="fa-brands fa-html5"></i>
<p>HTML</p>
</div>
<div class="tech-css">
<i class="fa-brands fa-css3-alt"></i>
<p>CSS</p>
</div>
<div class="tech-node">
<i class="fa-brands fa-node-js"></i>
<p>nodeJs</p>
</div>
<div class="tech-react">
<i class="fa-brands fa-react"></i>
<p>reactJs</p>
</div>
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente,
minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque
a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse.
</p>
</div>
</div>
<!--xBlog Detailx-->
<script src="js/blog-detail.js"></script>
</body>
</html>
I store all the value from input in localStorage with the key name ${blogs[i].title} in the card title anchor which came from the title input form, how can I access the key name with localStorage.getItem for the specific title that I input?
Thanks in advance.
You have a link to navigate in each blog item:
<a href="blog-detail.html" onclick="renderBlog(event)" id='${blogs[i].title} action="blog-detail.html"'>
<p>${blogs[i].title}</p>
</a>
onclick run your renderBlog function and also navigate to blog-detail.html. You can run the function and avoid the navigation executing event.preventDefault(). It's makes sense if you show list of blogs and selected blog in same page, which isn't the case.
So, you need do the navigation. An option to indicate in the page the item to render is add a parameter in the Url. Sonmething like:
<a href="blog-detail.html?${blogs[i].title}" action="blog-detail.html"'>
<p>${blogs[i].title}</p>
</a>
And when you load your blog-detail.html, use window.location.search (removing the ? at position 0) to get the title and, with the title, you can access and use your data from storage.
I am trying to close a div by clicking a button with SlideUp function.
But when I click on button it opens as expected and closes other divs. But doesn't close it re-opens itself.
Here is my html code
<div class="row all-row">
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="img.png" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Ipsunlore</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
Find
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="image.jpg" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Mister: Ipsun</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
From
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
</div>
and here is the Jquery codes:
<script>
$(".opener").click(function(){
$(".all-row").find(".card-wrapper").slideUp();
$(this).closest(".card-wrapper").slideToggle();
})
</script>
You use .closest(), which finds the closest matching parent. But what you need is .prev() because the element you want to target is the previous sibling... Not it's parent.
Additionnaly, you should remove this targeted element form the "all" .card-wrapper collection, using .not()
$(".opener").click(function() {
// The card previous to the clicked .card-opener anchor
var this_card = $(this).prev(".card-wrapper")
// Make sure all cards closes EXCEPT this one
$(".all-row").find(".card-wrapper").not(this_card).slideUp();
// Toggle this one
this_card.slideToggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row all-row">
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="img.png" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Ipsunlore</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
Find
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="image.jpg" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Mister: Ipsun</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
From
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
</div>
I am using Rails and did a navbar. The navbar folds into a burger after the certain width has been reached. I am able to click on the burger-sign without defining any event listener in JS. I just added this into the head of my application.html.erb
<meta>
<%= javascript_include_tag 'application' %>
<%= yield :js %>
<meta>
After adding, the click worked perfectly, but my home link, root_path was broken. It constantly lead to the #index page, but would display only "2019"on the blank page, not the actual #index page layout. I fixed the links adding the get method ty my link, like this:
<li><%= link_to 'Home', root_path, method: :get %></li>
What still doensn't work, is my browser back button, this still leads to this weird blank page with the 2019 printed on it. Can someone explain what is happening and how do I get to the previous page by clicking on the browser back button? Thanks!
P.S. This is the sourse html
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="RST7jzlY6IftapnMzEI9BkObFqh4B8EaX4cnX7PavwQq7ziZ5PKkVtgnExe8oShZxl56m40/UBgYG0OacVrWbg==" />
<meta>
<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/bootstrap/affix.self-b2bd74404ab3c627c5129dcdd3bdc2fc0a9d4bff4e1b6f1bae96412f9a1e9723.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-7c7aa23778284da0e4aa395a0a6d858c7efd891c9312fe71908b28292654ac0c.js?body=1"></script>
<script src="/assets/bootstrap/button.self-b7a8ce9f47662b97ab74ef3dd416e93d3a4f644b252307a28231976a0149feef.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-c2c0ad2347d3fdd8447abd9d5792efed40ad5afadc5e0de3001e34904a6f68ce.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-4db094cc14a1aafa93e51e6f298115323037bb9e24c060dd0de52f27446f6227.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-7efa4aa654357ae664a98ec52151c25cd4927eacd1fabe038d068d9344b62cbd.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-4ca048907279f4bb9187ba2541ae5d03296917d5c42e8fef0b58ec31c8902f0f.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-e62629e47ba5fe8b7faaa745f2fef2ccdb1bfd56ffb4f95615684ef40c74bcc4.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-7fbfa844201ceeb4b896e4d185a33df19a284fe461281b7c0f78dbea2ef6da5a.js?body=1"></script>
<script src="/assets/bootstrap/transition.self-3c74f1999fcbf39cfb240b67c9a9e900863859f82f53fb27e5a388fe5e1a1c5c.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-82858d5843f55bfed321ea59fc5b180f3d2a8afc498ebc4d665561110b807875.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-a1e6d4555fb912f0405099135eaddbe8273ba8f08323477a471d34419d57b446.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1"></script>
<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/profile.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/reviews.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/user_steps.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/application.self-813dac1f9eb54ab17313987648014af35d74ebeb15c2265509c52491183d3dcc.js?body=1"></script>
<meta>
<link rel="stylesheet" media="all" href="/assets/style.self-67cdb30c3f83239515cab5c4f35c9f7533c426bd77b8d75c40e8ff613eb658ec.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-fe639f1da8d2570340060e10dc6bf2430bb27ff5e40357dce724cbc8efb24584.css?body=1" data-turbolinks-track="reload" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand pull-left" href="#">
<img src="/assets/logo_transparent-ad9441c50046e461177bad078050d5345754d0413d7ef8a7f549aa5bf35e466e.png" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a data-method="get" href="/">Home</a></li>
<li><a>About</a></li>
<li><a>Search</a></li>
<li><a>Contact</a>
<li>
<div class="log-in-btn"><button class="btn" type="submit">Log in</button></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
</div>
<head>
<title>Neignbornow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="empty-space"> </div>
<div class="site-blocks-cover overlay" style="background-image: url(https://images.unsplash.com/photo-1464082354059-27db6ce50048?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80);" data-aos="fade" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center justify-content-end text-center">
<div class="row justify-content-center mb-4">
<div class="col-md-8 text-left">
<div class="site-intro">
<h1>Home is about personal connections, not just neighbors.</h1>
<p>Recconect with your neighbors, by sharing things and experiences. Now.</p>
<button class="btn register" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<!-- About section -->
<div class="site-section bg-light">
<div class="container">
<div class="col-12">
<h2>About Neighborheart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</p>
</div>
</div>
</div>
<!-- About section -->
<!-- Testimonials -->
<div class="site-section bg-white">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Testimonials</h2>
</div>
</div>
<div class="slide-one-item home-slider owl-carousel">
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_3.jpg" alt="Image" class="img-fluid mb-3">
<p>John Smith</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_2.jpg" alt="Image" class="img-fluid mb-3">
<p>Christine Aguilar</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_4.jpg" alt="Image" class="img-fluid mb-3">
<p>Robert Spears</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_5.jpg" alt="Image" class="img-fluid mb-3">
<p>Bruce Rogers</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<!-- Search section and show map -->
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="h5 mb-4 text-black">Search for items in your neighborhood</h2>
<!-- Serach bar -->
<div class="form-search-wrap mb-3" data-aos="fade-up" data-aos-delay="200">
<form method="post">
<div class="row align-items-center">
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-4">
<input type="text" class="form-control rounded" placeholder="What are you looking for?">
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="wrap-icon">
<span class="icon icon-room"></span>
<input type="text" class="form-control rounded" placeholder="Location">
</div>
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="select-wrap">
<span class="icon"><span class="icon-keyboard_arrow_down"></span></span>
<select class="form-control rounded" name="" id="">
<option value="">All Categories</option>
<option value="">Real Estate</option>
<option value="">Books & Magazines</option>
<option value="">Furniture</option>
<option value="">Electronics</option>
<option value="">Cars & Vehicles</option>
<option value="">Others</option>
</select>
</div>
</div>
<div class="col-lg-12 col-xl-2 ml-auto text-right">
<input type="submit" class="btn btn-primary btn-block rounded" value="Search">
</div>
</div>
</form>
</div>
<!-- Search bar -->
<!-- Map -->
<!-- Map -->
</div>
</div>
</div>
</div>
<!-- Search section Search section and show map -->
<!-- Cathegories -->
<div class="site-section" data-aos="fade">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Popular Categories</h2>
<p class="color-black-opacity-5">Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
<div class="overlap-category mb-5">
<div class="row align-items-stretch no-gutters">
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-car"></span></span>
<span class="caption mb-2 d-block">Services</span>
<span class="number">1,921</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-closet"></span></span>
<span class="caption mb-2 d-block">Events</span>
<span class="number">2,339</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-home"></span></span>
<span class="caption mb-2 d-block">Household</span>
<span class="number">4,398</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-open-book"></span></span>
<span class="caption mb-2 d-block">Books & Magazines</span>
<span class="number">3,298</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-tv"></span></span>
<span class="caption mb-2 d-block">Electronics</span>
<span class="number">2,932</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-pizza"></span></span>
<span class="caption mb-2 d-block">Beverages</span>
<span class="number">183</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Cathegories -->
<div class="newsletter bg-primary py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2>Newsletter</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-md-6">
<form class="d-flex">
<input type="text" class="form-control" placeholder="Email">
<input type="submit" value="Subscribe" class="btn btn-white">
</form>
</div>
</div>
</div>
</div>
</body>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<h2 class="footer-heading mb-4">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident rerum unde possimus molestias dolorem fuga, illo quis fugiat!</p>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Navigations</h2>
<ul class="list-unstyled">
<li>About Us</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Follow Us</h2>
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-instagram"></span>
<span class="icon-linkedin"></span>
</div>
</div>
</div>
<div class="col-md-3">
<form action="#" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Search products..." aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-white" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
I've created a Template Literal that displays information about a product. Open the collapse, and click a button to display a modal for additional information.
I'm passing strings of text to output to a ul within the modal. If a string is empty, it's displaying an output of "undefined".
If a string is empty, how do I not display that li at all?
// Javascript
const eventList = [
{
compShort: "competency-goes-here",
courseTitle: "Course Title is Longer and will Go Here",
courseComp: "Category Goes Here",
courseNumber: "course1",
courseDesc:
"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore id perspiciatis aliquam, error voluptatem consequuntur similique eligendi vitae odit veritatis iusto totam autem praesentium eum rerum alias, fugiat corporis quisquam iure suscipit beatae voluptate fugit tenetur itaque.",
coursePID: "123456789"
}
];
function eventTemplate(events) {
return `
<div class="col-sm-12">
<div class="row f-cat active" data-cat="${events.compShort}">
<div class="accordionCourses" id="accordionexample">
<div class="card border-1 border-dark-light">
<div class="row">
<div class="col-md-12">
<div class="card-body pb-0">
<h5 class="card-title font-weight-bold ism-text-dblue">${events.courseTitle}</h5>
<p class="card-text color-dark font-weight-bold text-italic">Competency Covered: ${events.courseComp}</p>
</div>
<div class="card-header bg-transparent border-0" id="headingone">
<h2 class="mb-0">
<button class="btn btn-link p-0 float-right" type="button" data-toggle="collapse" data-target="#${events.courseNumber}" aria-expanded="true" aria-controls="${events.courseNumber}">
<i class="fas fa-angle-double-down fa-w-10 fa-1x ism-text-green"><span hidden>text</span></i>
</button>
</h2>
</div>
</div>
</div>
</div>
<div id="${events.courseNumber}" class="collapse bg-grey" aria-labelledby="headingone" data-parent="#accordionexample">
<div class="card-body p-3">
<p class="card-text mb-3"> ${events.courseDesc} </p>
</div><!-- new row -->
<div class="card-footer border-0 bg-transparent pt-0">
<div class="row no-gutters">
<div class="col-sm-12 pb-3"><h6><span class="fas fa-plus-square"></span> View More</h6></div>
<div class="col-sm-12 pb-3"><h6><strong>Member: $135</strong> | Nonmember: $199</h6></div>
<div class="col-sm-12">Purchase</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
document.getElementById("eLearningCrsList").innerHTML = `
${eventList.map(eventTemplate).join(" ")}
`;
const eLmodalList = [
{
AriaId: 'course1',
learn1: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aut id at fuga beatae, vel neque ea delectus? Ad, sequi? Animi perferendis rerum ad amet.',
learn2: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quisquam non minima velit dicta praesentium, itaque ad saepe autem dignissimos porro quae eius accusantium. Cumque!',
learn3: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias magni explicabo ex, quibusdam quae illo quasi esse iusto! Quas, vero quibusdam. Voluptatem laborum modi architecto!'
}
];
function eLmodalTemplate(modals) {
return `
<div class="modal fade" id="${modals.AriaId}Modal" tabindex="-1" role="dialog" aria-labelledby="${modals.AriaId}Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="${modals.AriaId}Label">Additional Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="card border-0">
<div class="card-body bg-grey p-2">
<h5 class="card-title font-weight-bold text-uppercase text-center m-0">You will earn 1 credit for this course</h5>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card border-0">
<h4 class="card-header bg-transparent border-0 pl-0">You will learn...</h4>
<div class="card-body pl-0">
<ul>
<li>${modals.learn1}</li>
<li>${modals.learn2}</li>
<li>${modals.learn3}</li>
<li>${modals.learn4}</li>
<li>${modals.learn5}</li>
<li>${modals.learn6}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
document.getElementById("eLearningModalList").innerHTML = `
${eLmodalList.map(eLmodalTemplate).join(" ")}
`;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container p-5">
<div class="row">
<div id="eLearningCrsList"></div>
</div>
</div>
<div id="eLearningModalList"></div>
Write a condition for each that only shows the <li> if there's a value:
${modals.learn1 ? `<li>${modals.learn1}</li>` : ""}
let modals = {
learn1: "One",
learn2: "",
learn3: "Three",
learn4: null,
learn5: "Five"
};
let result = `
${modals.learn1 ? `<li>${modals.learn1}</li>` : ""}
${modals.learn2 ? `<li>${modals.learn2}</li>` : ""}
${modals.learn3 ? `<li>${modals.learn3}</li>` : ""}
${modals.learn4 ? `<li>${modals.learn4}</li>` : ""}
${modals.learn5 ? `<li>${modals.learn5}</li>` : ""}
${modals.learn6 ? `<li>${modals.learn6}</li>` : ""}
`;
document.body.innerHTML = result;
Alternatively, if those are your only modals, you could implement a loop instead:
${Object.values(modals).map(m => m ? `<li>${m}</li>` : '').join("")}
let modals = {
learn1: "One",
learn2: "",
learn3: "Three",
learn4: null,
learn5: "Five"
};
let result = `${Object.values(modals).map(m => m ? `<li>${m}</li>` : '').join("")}`;
document.body.innerHTML = result;
I am using slick slider for a page.Everything works great except one thing: When I drag the slide sometimes the image or text bounces and that's look really bad. What can I do to avoid that problem?
Here is my code
<section class="portfolio" id="portfolio">
<div class="container" style="height:100px">
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
<div id="portfolio_slider">
<div id="item">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 text-right">
<div id="project_name">
PROJECT<br />
NAME
</div>
<div id="project-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor erat,
laoreet ut ullamcorper vel, fermentum vel ex. Donec convallis leo sit amet auctor
rutrum. Nullam accumsan risus at quam porttitor ec tortor erat, laoreet ut
ullamcorper vel, fermentum vel tristique.
</div>
<div id="read_more">Read More...</div>
</div>
<div class="col-lg-7 col-lg-offset-1" id="project_image">
<img class="img-responsive shadow" src="http://i.imgur.com/35Lun7R.jpg" />
</div>
<div class=" col-lg-1 col-md-1 social_buttons">
<div class="centered">
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-facebook"></i>
</div>
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-twitter"></i>
</div>
<div class="flex-item">
<i class="fa fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
in the code pen, in CSS, there is one class, #portfolio_slider #item with margin: top 20px remove it.