Collapsing Content - Javascript CSS - javascript

I am looking for help in modifying the code I have cobbled together to expand a panel to show full details for an item.
The code works fine for a single element on the page. However, I want to change it so I can have multiple items listed. However, at present when I add additional panels they do not collapse and expand only the first instance works.
I assume I need to adjust the Javascript in some way so it can link to each unique instance.
I know there are existing packages available from jquery and bootstrap but for reasons I won't go into these are difficult for me to implement so I am hoping someone can help me modify this code to work.
window.onload=function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
tagList.style.display = 'none';
document.getElementById('clearance-item-header').addEventListener('click',function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
if (display == 'none') {
tagList.style.display = 'inline';
document.getElementById('toggleExpandBtn').textContent = '[-]';
} else {
//style.setProperty('height',lineheight*3+'px');
tagList.style.display = 'none';
document.getElementById('toggleExpandBtn').textContent = '[+]';
}
});
}
<style type='text/css'>
#tagList { overflow: hidden; }
.clearance-item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.clearance-item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.clearance-item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.clearance-item-title {width:450px; float:left;}
.clearance-item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.clearance-item-detail {width:300px; float:left;}
.clearance-item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-price {width:105px; float:left; padding-right: 60px;}
.clearance-item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
#toggleExpandBtn {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
#clearance-item-header {cursor:pointer;}
#buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
.buylink-product select {max-width:200px !important;}
.clearance-item-content { padding-top:10px; }
.clearance-item-content h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-content p { margin-bottom:6px; text-align:justify; }
</style>
<div class="clearance-item">
<div id="clearance-item-header">
<div class="clearance-item-image">
<img src="images/clearance-item.jpg" width="100" height="100" />
</div>
<div class="clearance-item-title">
<h2>Product Full Title</h2>
</div>
<div class="clearance-item-detail">
<p>Condition: New/Used/Other</p>
<p>Location: Brighton</p>
</div>
<div class="clearance-item-price">
<p>£999.99</p>
</div>
<div id="toggleExpandBtn">[+]</div>
<div style="clear:both;"></div>
</div>
<div id='tagList'>
<div class="clearance-item-content">
<h3>Product Name</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div style="clear:both;"></div>
</div>
</div>

OK. Figured it out. Changed the styling id's to classes and got the javascript to dynamically assign unique id's to each instance as well as adding click event to the header div. Then used this.getAttribute("id") to get the id of the instance of the header that was clicked. Used that to set display to inline or none for the associated content.
window.onload=function(){
var headerclassname = document.getElementsByClassName("item-header");
for(var i=0;i<headerclassname.length;i++){
headerclassname[i].addEventListener('click', toggleContent, false);
headerclassname[i].id = 'item-header-' + i;
}
var contentclassname = document.getElementsByClassName("item-content");
for(var x=0;x<contentclassname.length;x++){
contentclassname[x].style.display = 'none';
contentclassname[x].id = 'item-content-' + x;
}
var toggleclassname = document.getElementsByClassName("item-toggle");
for(var y=0;y<contentclassname.length;y++){
toggleclassname[y].id = 'item-toggle-' + y;
}
}
var toggleContent = function() {
var headerid = this.getAttribute("id");
var contentid = headerid.replace("item-header-", "item-content-");
var toggleid = headerid.replace("item-header-", "item-toggle-");
var displayvalue = document.getElementById(contentid).style.display;
if (displayvalue == 'none') {
document.getElementById(contentid).style.display = 'inline';
document.getElementById(toggleid).textContent = '[-]';
} else {
document.getElementById(contentid).style.display = 'none';
document.getElementById(toggleid).textContent = '[+]';
}
}
<style type='text/css'>
.item-content { overflow: hidden; }
.item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.item-title {width:450px; float:left;}
.item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.item-detail {width:300px; float:left;}
.item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.item-price {width:105px; float:left; padding-right: 60px;}
.item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
.item-toggle {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
.item-header {cursor:pointer;}
#buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
.buylink-product select {max-width:200px !important;}
.item-description { padding-top:10px; }
.item-description h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.item-description p { margin-bottom:6px; text-align:justify; }
</style>
<div class="item">
<div class="item-header">
<div class="item-image">
<img src="image.jpg" width="100" height="100" />
</div>
<div class="item-title">
<h2>Item Title Here</h2>
</div>
<div class="item-detail">
<p>Condition: New</p>
<p>Location: Brighton</p>
</div>
<div class="item-price">
<p>£100.00</p>
</div>
<div class="item-toggle">[+]</div>
<div style="clear:both;"></div>
</div>
<div class="item-content">
<div id="buylink">
<?PHP processWebCodes("Type: BuyLink
Layout: Combined
Product: 1200811
1200811-AllVariants: True");?>
</div>
<div class="item-description">
<h3>Sub Title Here</h3>
<p>Detailed Description Here</p>
<p> </p>
</div>
<div style="clear:both;"></div>
</div>
</div>

You say
at present when I add additional panels they do not collapse and expand only the first instance works
Could you provide some code with an additional panel? Without seeing your code it is difficult to tell, although I would suggest you make sure that each of the panels and buttons has unique ids. Otherwise, you would get the result you are experiencing from js.

Related

Overlap Home Image Button over a colorbar

First of all, sorry for my bad English, hope you understand me.
Second, I started programing yesterday, wathed lots of tutorials and didn't found anything, probably I am just dumb.
Just begun a new html project, I started with a colored bar for the top of the website, then linked an image to the main html project, something like Home navigation bar image idk.
Now the problem is, I want to overlap the already linked to main html to colored bar (https://i.stack.imgur.com/iVqm3.png)
Bluebar CSS code:
.upperblue {
width: 100%;
background-color: rgb(71, 103, 245);
height: 100px;
position: relative;
}
Image HTML and CSS
<p id="homeimage">
<a href="/index.html">
<img `src="https://lh3.googleusercontent.com/EiXgCES3j3b98a6ADBoU37yzcAO1shECNmOzbCZn2HYcUBPW4xiFmCHsXCy-A`mWGTn5ySEU3U-Rpq2H_NrXjjuSg-Qrr3m74XSVF0y9VD6ayXRy2zYaTVqONCjlneaMfsb352Z0S=w2400" height="185"
width="426">
</a>
</p>
I made a example here, i import some fonts , a bunch of CSS selectors . Start studing , ctrl + shift + i on chrome was a good tool for you test it all !!!
<!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>Document</title>
<!-- IMPORTING GOOGLE MATERIAL FONT ICONS (https://fonts.google.com/icons) -->
<!--
How to use it :
Place the .material-symbols-outlined class in some element that have text (div,span,p,li,table,footer,header,etc..)
I think that it only dont work like inputs, textarea elements
Found some icon : [eg: https://fonts.google.com/icons?icon.query=menu]
Click and copy the example that show right in the page .
example :
<span class="material-symbols-outlined">menu</span>
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<!-- IMPORTING POPPINS FONT FROM GOOGLE FONTS (https://fonts.google.com/) -->
<!--
How to use it :
On the google page , well on the up-right side on the page have an button : 'View selected families'
(Its a icon actually, you will not see the text XD)
Click there and you will see how to use each font
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
h1 , h2 ,h3 , h4, h5 {
font-weight: 500;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}
body {
margin: 0;
}
main {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
/* NOTE THAT HERE WE USE 2REM IN THE SIZE OF ASIDE ICONS , BECAUSE IS THEIR SIZE ON .header-icon ;D */
main > header {
flex: 0 0 50px;
display: grid;
grid-template-columns: 2rem auto 2rem;
justify-items: center;
align-items: center;
background: linear-gradient(45deg, #e7e7e7, #b9b9b9);
border-bottom: 1px solid #b5b5b5;
}
main > header > div:nth-child(1) {
margin: 0;
}
main > header > div:nth-child(2) {
margin: 0;
}
main > header > div:nth-child(3) {
margin: 0;
}
main > section {
flex: 1 0 auto;
padding: 10px;
background: #f1f1f1;
}
main > section > div:nth-child(1) {
width: 100%;
height: 100%;
border-radius: 10px;
padding: 10px;
background: white;
}
main > section > div:nth-child(1) > p {
margin-top: 10px;
}
main > footer {
flex: 0 0 10vmin;
display: grid;
grid-template-columns: auto auto auto;
justify-items: center;
border-top: 1px solid #ffffff82;
background: #e7e7e7;
}
main > footer > div:nth-child(1) {
margin: 0;
}
main > footer > div:nth-child(2) {
margin: 0;
}
main > footer > div:nth-child(3) {
margin: 0;
}
/* SEE THAT , WE CAN TURN OUR ICON BIGGER SETTING A FONT-SIZE PROPERTY !! ALSO OTHER OPTIONS*/
.header-icon {
font-size: 2rem;
}
/* ALSO NOTE THE CSS SELECTORS IM USING ...*/
a.normal {
color: black;
text-shadow: 0px 0px 1px black;
transition: .1s linear 0s text-shadow;
}
a.normal:hover {
text-shadow: 0px 0px 2px black;
}
a.button {
display: block;
border-radius: 6px;
color: white;
font-weight: 500;
text-align: center;
text-shadow: 1px 1px grey;
border: 1px solid gray;
background: #c1c1c1;
padding: 4px 14px;
transform: translate(0px, 0px);
transition: .1s linear 0s all;
}
a.button:hover {
transform: translate(1px, -1px);
box-shadow: 0px 0px 3px -1px #00000069;
}
button.sucess {
border-radius: 6px;
background: green;
color: white;
padding: 2px 10px;
border: 0;
}
</style>
</head>
<body>
<main>
<header>
<!-- Using google materials icons font with a custom class !! the default class need to be here !!-->
<div><span class="header-icon material-symbols-outlined">menu</span></div>
<div><h3>LOGO</h3></div>
<div><span class="header-icon material-symbols-outlined">toggle_on</span></div>
</header>
<section>
<div>
<h5>Main content</h5>
<p>
Lorem ipsum dolor sit amet. Est internos galisum ut adipisci voluptas qui ipsum quisquam aut dicta assumenda ut iste velit sit quia quasi id sequi fugiat. Et autem veniam eum alias optio et quas tenetur aut aperiam dolorem est soluta laboriosam non cupiditate officiis qui neque consequatur. Est ipsam numquam sit nobis iure quo assumenda quidem ut voluptatem accusamus rem consequatur nesciunt eum deserunt accusamus ad eaque explicabo. Hic quam facilis et dolorum galisum ut dolorum aliquid ad dolorem sapiente in aspernatur nemo sed veritatis maxime non dolorem quisquam.
A nemo voluptas a repellat iste ut harum dolor aut neque dolorum nam voluptatibus amet quo repellat autem et quasi nemo. Vel temporibus adipisci nam nesciunt quidem aut voluptas placeat in accusantium sunt ut laborum illum a esse quia aut doloribus molestiae. Ut sint nemo non odit autem ea optio repudiandae et sequi nostrum.
Aut culpa cumque qui repellendus earum aut dolores labore et velit ullam eum ratione culpa ut nemo repellat in dolorum eius. Et cupiditate maxime eos officiis animi eos architecto quam aut ipsa inventore. Ad quos sint ex cumque quis eum officiis harum qui culpa soluta eos optio omnis ut voluptatem accusamus aut ratione fugit. Et inventore vero ab eligendi debitis sit tempore dicta nam voluptatem nostrum.
</p>
Link
Link
<button class="sucess">Button</button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="checkbox" name="" id="myCheckbox"><label for="myCheckbox"></label>
<input type="date" name="" id="">
<input type="file" name="" id="">
<input type="number" name="" id="">
<input type="password" name="" id="">
<input type="search" name="" id="">
<input type="radio" name="" id="">
</div>
</section>
<footer>
<div>FOOTER 1</div>
<div>FOOTER 2</div>
<div>FOOTER 3</div>
</footer>
</main>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
CSS SELECTORS // HTML TUTORIAL

div doesn't respond when clicking on it in a show more/less container

So this div doesn't respond when I click on the h3 inside it or on the span
I used flex box in the "question-title" div, I guess that what causes the problem, is there a way I can make this div showing more/less when I click on it, not specifically outside h3 and the span, because it only works when I click in the space between h3 and the span.
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e)=> {
let paragraphElement = e.target.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});
.question {
width: 60%;
margin: 0 auto;
}
.part-one h3 {
color: var(--main-color);
font-size: 30px;
margin: 0 0 20px;
}
.main-question {
margin: 20px auto;
padding: 20px;
text-align: center;
border: 1px solid rgb(207, 207, 207);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.main-question h4 {
margin: 0;
color: #607d8b;
}
.main-question h4::selection {
background-color: transparent;
}
.main-question p {
margin: 34px 0 0;
text-align: justify;
color: var(--main-color2);
display: none;
}
.main-question p.showHide {
display: block;
}
.question-title {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
height: 20%;
width: 100%;
background-color: #EEE;
padding: 20px;
}
.question-title span {
font-size: 20px;
font-weight: bold;
color: #607d8b;
letter-spacing: -3px;
}
.question-title span::selection {
background-color: transparent;
}
<!-- Start questions -->
<div class="container">
<div class="question">
<div class="part-one">
<h3>Some Frequent Questions</h3>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
</div>
</div>
</div>
<!-- End questions -->
Your issue here is this line of code:
let paragraphElement = e.target.parentNode.querySelector("p");
Since you didn't set the indentations on your HTML properly, I didn't notice this issue in the first place.
You need to use this instead:
let paragraphElement = e.target.closest(".main-question").querySelector("p")
The answer of your question in the comment is NO, but when you click h4, you also click div because they are occupying the same area, unless you added stopPropagation to your function. But "e.target" is the item you clicked directly. If it's h4, its parentNode is "question-title" and it has no "p" child.
When you work with JS, always use console.log(). You can see the problem most of the time.
//This part is not necessary because the class "showHide" will be toggled below
document.querySelectorAll(".main-question").forEach(el ...
Also change your CSS for ".question-title" => "justify-content: space-around;" to show the icon
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e) => {
let paragraphElement = e.target.parentNode.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});

Margin Shifting: <ul> jitters when hover function initiated.

This is just a theory based question. I am fairly new to programming and was wondering why this happens within HTML.
I'm making an HTML based resume where when I have a mouse pointer hover over my ul it will activate a function such as this.
$("li#about").hover(function(){
$("#content1").toggle();
});
The Issue While hovering over my selector when my #content was no longer hidden, my margins between my header and ul box would cause jittering within the page.
I went from:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
to:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
</header>
My questions:
What was the reason for the sporadic jittering and how did wrapping my ul within the header tag prevent this from occurring?
Is my solution proper etiquette? If not, what would you recommend?
If you have any good recommendations for coding etiquette please post links in comments.
sing-song Being new, I know my code must look like poo. Regardless I added a fiddle for you.
Thanks for the read! I apologize in advance for the ugly code. I posted a JSFiddle as well, figured it would help any other newbies to conceptualize what i'm asking. This fiddle is without correction Just change the closing header tag to where I specified above to see the results.
My Fiddle: https://jsfiddle.net/dgibbins1/cwn6ws02/4/
header{
background: #5a4c1c;
border-radius:10px;
opacity:0.85;
padding:1px 0;
}
h1{
margin: 0 0;
color: white;
padding-left:10px;
}
h3{
color:#dad6c7;
padding-left: 31px;
}
body{
background:#dad6c7;
}
ul{
list-style-type:none;
padding: 0px 15px;
margin: 50px 0;
}
span{
color:white;
}
li{
font-family:Helvetica;
}
div.column{
border-style:solid;
border-color:rgba(56,43,3,1);
}
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto;
}
.clear-fix{
}
.column li{
padding:4px 0 4px 0;
margin-top:30px;
margin-bottom:30px;
font-family:'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr{
clear:both;
font-size:0;
}
.column{
float:left;
background-size: 220px 220px;
background:#5a4c1c;
padding: 5px 2px;
margin: 10px 10px 0 0;
opacity:0.5;
width: 15%;
border-radius:20px;
}
.column li:hover{
background: black;
border-radius:20px;
}
.content{
color:#5a4c1c;
font-weight: bold;
font-family: helvetica;
width:85%;
}
.footer{
text-align: center;
background:#5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius:10px;
}
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="/normalize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<title> Resume: Ryan Anderson</title>
</head>
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content" >
<p>Education <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References <br />
Paul Garven (co-worker): (780)-828-1111<br />
Paul CWC (owner of CWWC): (416)- 721-1111<br />
Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact <br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
<script>
$("li#about").hover(function(){
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();
});
</script>
</body>
You have an error in your CSS.
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto; <--
}
padding doesn't take the value auto.
Switch it to padding-top:3px; padding-bottom:3px; and the jittering will stop.
Link: Working proof
you have some issues with your markup
some of your nesting is applied incorrectly.
in fact i am not even sure i found all the errors
some of your css is incorrect as well
$("li#about").hover(function() {
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();})
header {
background: #5a4c1c;
border-radius: 10px;
opacity: 0.85;
padding: 1px 0;
}
.minheight {
min-height: 200px;
}
h1 {
margin: 0 0;
color: white;
padding-left: 10px;
}
h3 {
color: #dad6c7;
padding-left: 31px;
}
body {
background: #dad6c7;
}
ul {
list-style-type: none;
padding: 0px 15px;
margin: 50px 0;
}
span {
color: white;
}
li {
font-family: Helvetica;
}
div.column {
border-style: solid;
border-color: rgba(56, 43, 3, 1);
}
#content1,
#content2,
#content3,
#content4 {
opacity: 1;
display: none;
padding: 3px auto;
}
.clear-fix {
}
.column li {
padding: 4px 0 4px 0;
margin-top: 30px;
margin-bottom: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr {
clear: both;
font-size: 0;
}
.column {
float: left;
background-size: 220px 220px;
background: #5a4c1c;
padding: 5px 2px;
margin: 10px 10px 10px 0;
opacity: 0.5;
width: 20%;
min-width:134px;
border-radius: 20px;
}
.column li:hover{
background: black;
border-radius: 20px;
}
.content {
color: #5a4c1c;
font-weight: bold;
font-family: helvetica;
width: 85%;
}
.footer {
text-align: center;
background: #5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius: 10px;
clear:both;
}
<link href="//normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span>
</li>
<li id='education'> <span>Education</span>
</li>
<li id='info'> <span>Experience</span>
</li>
<li id='ref'> <span>References</span>
</li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content">
<p>Education
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References
<br />Paul Garven (co-worker): (780)-828-1111
<br />Paul CWC (owner of CWWC): (416)- 721-1111
<br />Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact
<br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
</body>

Text slider increases offset from the left after each iteration

I am basically transferring existing slider from existing site to a new one, and I didn't want to waste additional time by figuring out how to create a text slider from scratch, since the client wants the same thing on his new site.
I found the code and modified it a bit to work on the new site. Except it doesn't really works as it should. The slider looks like this:
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).width(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.width();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
Now I think I know what the issue is, but I don't know how to fix it. For some reason, my .items wrapper, if it doesn't have set width, won't have all the links in one line, so after a while I won't have any links inside to scroll.
Strangely this isn't set on the client side and I couldn't figure out what css rule they used that will allow this (move to left infinitely without width being set). So to circumvent this I'm calculating total width, and then setting it each time the slider clones the element that passed.
But what this does (at least that's my guess) is that after a while the gap between the .items wrapper start on the left (where the icon is), and the link that slides in, becomes progressively bigger. After a minute or so the gap becomes really big.
So is there a way to prevent this? What am I doing wrong here? :\
Hi try this sample i hope it help you
<html>
<head>
<title>Demo Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item " >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can try outerwidth() instead of width() as I think the solution is to add +2px to the width which is actually the padding-left of each anchor item.
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).outerWidth(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.outerWidth();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>

Show hide available content

I have some content in my post. But I want to hide it until I click to a link in this post. I have yet to build this site, but I will say my idea.
The first Heading
The second Heading
The third Heading
The fourth Heading
/* The content following are hidden Until I clicked to a link above. /
/ Content is available wrapped in a div tag, do not loaded from another site. */
Content 1 will be show only click to "1. The first Heading"
Content 2 will be show only click to "2. The second Heading"
Content 3 will be show only click to "3. The third Heading"
Content 4 will be show only click to "4. The fourth Heading"
Can use CSS or Ajax / jQuery to create the effect?
You could do it using the following jquery code:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
Here is the complete demo how you can hide and show the element by click event.
I have made a pure css accordion that achieves the same functionality.Checkout the following link at codepen
HTML:
<div class="container">
<ul>
<li>What is java Programming Language?
<div class="acc-content" id="first">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae.
</p>
</div></li>
<li>How is javascript different from java?
<div class="acc-content" id="second">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
<li>Other front end technologies
<div class="acc-content" id="third">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
padding-top: 50px;
font : 1em cursive;
background-image: url(http://www.mrwallpaper.com/wallpapers/fantasy-winter-scenery-1920x1200.jpg);
background-size: cover;
color: #fff;
overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
max-width: 500px;
margin: auto;
padding: 5px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.acc-header{
display: block;
cursor: pointer;
padding: 10px 20px;
background-color: #000;
opacity: 0.7;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #fff;
border-radius: 2px;
margin-bottom: 10px 0 0 10px;
}
.acc-content p{
margin: 10px;
}
.acc-content{
background-color: #222;
opacity: 0.7;
height: 0px;
overflow: hidden;
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-ms-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
.acc-content:target{
height: 170px;
}
With jQuery it can be pretty easy. By default you hide .content divs with CSS and display the corresponding one on heading click. Consider bellow example.
var $content = $('.content');
$('h2').click(function() {
$content.removeClass('show')
.filter('.content-' + $(this).data('content'))
.addClass('show');
});
.content {
display: none;
padding: 5px;
background: #EEE;
}
.content.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 data-content="1">Heading #1</h2>
<h2 data-content="2">Heading #2</h2>
<h2 data-content="3">Heading #3</h2>
<div class="content content-1">Content #1</div>
<div class="content content-2">Content #2</div>
<div class="content content-3">Content #3</div>
If I understand well, I would recommend to load from ajax the content on first click and then hide it instead of deleting the toggled panel and retrieve it again from AJAX each time (so that there is no wait on each click and less requests).
So here's a way of doing it:
$('.header').click(function()
{
var clickedHeader= $(this);
if (clickedHeader.next().is('.toggle:visible'))
{
clickedHeader.next().slideDown(800);
}
else if (clickedHeader.next().is('.toggle:hidden'))
{
clickedHeader.next().slideUp(800);
}
else
{
$.get(url, data, function(data)
{
// First do some treatment if needed...
clickedHeader.after('<div class="toggle" style="display:none;">'+data+'</div>');
clickedHeader.next().slideDown(800);
});
}
});
This will work if you have HTML like this for ex.
<div class="header">First header</div>
<div class="header">Second header</div>
<div class="header">Third header</div>
<div class="header">Fourth header</div>
and after each header you would toggle a div that has class '.toggle'.
Hope it helps.

Categories