Jquery - Each loop not working inside click event - javascript

I am having trouble with this problem. I have searched the internet for about 2 hours before asking this, and I have searched here on stack overflow.
I have a .click event on navigation spans I am linking these to content divs by setting the same title on both the spans and divs.
now the two each loops that I run to set the titles work perfectly and the click event on the spans work perfectly. However the each loop that I have nested in the click event doesn't run and I am baffled as to why.
<%# Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
var i = 0;
var l = 0;
var thisTitle;
$(function() {
$(".sectionSelector > nav > span").each(function() {
i += 1;
$(this).attr("title", i);
});
$(".sectionSelector > section").each(function() {
l += 1;
$(this).attr("title", l);
});
$(".sectionSelector > nav > span").click(function() {
thisTitle = $(this).attr("title");
$(".sectionSelector > section").each(function() {
//any code put here doesnt work. i dont know why.
});
});
});
</script>
<style type="text/css">
div.sectionSelector {
}
div.sectionSelector nav {
width: 100%;
height: 25px;
padding-top: 5px;
background-color: #002;
color: white;
}
div.sectionSelector nav span {
padding-left: 10px;
padding-right: 10px;
border-left: 2px solid white;
border-right: 2px solid white;
}
div.sectionSelector nav span:first-child {
border-left: 4px solid white;
margin-left: 10px;
}
div.sectionSelector nav span:last-child {
border-right: 4px solid white;
}
div.sectionSelector section {
}
div.sectionSelector section:first-child {
}
div.sectionSelector section:last-child {
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="phMainContent" Runat="Server">
<div class="sectionSelector">
<nav><span>Section 1</span><span>Section 2</span><span>Section 3</span></nav>
<section>
<h1>Section 1</h1>
<p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
</section>
<section>
<h1>Section 2</h1>
<p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
</section>
<section>
<h1>Section 3</h1>
<p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
</section>
</div>
</asp:Content>


If you are looking for selecting corresponding section as per the span by title attribute, than try this:
$(".sectionSelector > section[title = \""+thisTitle+"\"]")
Working : Demo
Snippet:
var i = 0;
var l = 0;
var thisTitle;
$(function() {
$(".sectionSelector > nav > span").each(function() {
i += 1;
$(this).attr("title", i);
});
$(".sectionSelector > section").each(function() {
l += 1;
$(this).attr("title", l);
});
$(".sectionSelector > nav > span").click(function() {
thisTitle = $(this).attr("title");
$(".sectionSelector > section").css("background","#fff");
$(".sectionSelector > section[title = \""+thisTitle+"\"]").css("background","lightblue");
});
});
div.sectionSelector {
}
div.sectionSelector nav {
width: 100%;
height: 25px;
padding-top: 5px;
background-color: #002;
color: white;
}
div.sectionSelector nav span {
padding-left: 10px;
padding-right: 10px;
border-left: 2px solid white;
border-right: 2px solid white;
}
div.sectionSelector nav span:first-child {
border-left: 4px solid white;
margin-left: 10px;
}
div.sectionSelector nav span:last-child {
border-right: 4px solid white;
}
div.sectionSelector section {
}
div.sectionSelector section:first-child {
}
div.sectionSelector section:last-child {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sectionSelector">
<nav><span>Section 1</span><span>Section 2</span><span>Section 3</span></nav>
<section>
<h1>Section 1</h1>
<p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
</section>
<section>
<h1>Section 2</h1>
<p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
</section>
<section>
<h1>Section 3</h1>
<p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
</section>
</div>
Note: The effect here of changing background color after selecting section is just random, you can do whatever you prefer after selecting corresponding section that of span based on title

Related

Make div fixed at the bottom of page with small height screen and take his specific position when scrolling

I have a save setting button for a profile edit web page. The page is long and I want the save setting button fixed at bottom of the page. On scrolling down it take her normal position. I can make it fixed at bottom on scrolling but I can't make it stick on the normal position when scrolling.
The design on small height mobile screen
And on scrolling down, I expect to stick before the footer
I add this css to the bottom container save-setting but this style make it fixed at the bottom all the time.
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
I think this question is similar to my question but I can't understand because the website example isn't working anymore. So anybody can help me in more details.
Edit
This is a example code for what I expect
.header {
height: 100px;
background-color: green;
}
.page-holder {
height: 600px;
background-color: red;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
button.primary-btn {
padding: 12px 20px;
border-radius: 10px;
color: #fcfcfc;
font-size: 14px;
line-height: 21px;
font-weight: 600;
background: linear-gradient(100.96deg, #15c077 8.41%, #2dc015 88.4%);
border: 0;
width: 100%;
}
.footer {
height: 300px;
background-color: orange;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
</div>
<div class="footer">
<h2>footer</h2>
</div>
So I want the save-settings at the bottom page but on scrolling it stick before the footer on his normal DOM position.

You can use position: sticky to fix the footer to the bottom, you can then place content below it, to have it stick to it.
.wrapper {
height: 100vh;
position: relative;
}
.content {
background: green;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: sticky;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
.under-settings {
background: blue;
}
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
<div class="save-settings">
Save Settings
</div>
<div class="under-settings">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
</div>

Following your case in details, it turns out that your HTML structure needs some tweaking:
.page-holder {
height: 100vh;
}
.save-settings {
text-align: center;
border-top: 1px solid black;
padding: 20px;
position: sticky;
bottom: 0;
right: 0;
left: 0;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
</div>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
<div class="footer">
<h2>footer</h2>
</div>
Make the .save-settings element a direct child of the body element.
In this case, the position: sticky; will work without adding any additional position property.

How to make image responsive? HTML/CSS

I have the following image:
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" align="left" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
How would I make the image responsive?
Expected Output:
See how the image is positioned like that? It's not fit the entire page, as its width and height are shortened. I want my image above to be just like that when viewed on a smaller device, otherwise, it should be as it is shown in the output above.
I tried changing the width and height of the image and used a media query but it did not work, so I removed the media query. Any suggestions?

Give the parent element a flex layout that changes using a media query. You don't need to use floats in this case.
You're missing a closing div tag for <div class='aligned'>
You should also let the width of the blockquote be auto until the screen gets to the size you want it to be on desktop.
.container {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
#media (min-width: 768px) {
.container {
flex-flow: row nowrap;
align-items: flex-start;
}
}
.aligned {
display: flex;
align-items: flex-start;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
max-width: 100%;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
#media (min-width: 800px) {
blockquote {
width: 800px;
}
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" align="left" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</div>
</div>

In your image tag, you have a property align="left" that is actually deprecated.
See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align
After removing that align="left" from your image tag, here's one way to do it:
/* Added code */
img {
display: block;
margin: 0 auto;
max-width: 80%;
height: auto;
}
#media all and (min-width: 768px) {
img {
float: left;
height: 200px; /* image height for larger screen only */
}
}
/* Your sample code */
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>

Try to make a navigation bar but something wrong

This is my current code. It can show where you are viewing like when you are reading "SEC 1" part, the "SEC 1" on the navigation bar gets highlighted. When you click the "SEC 2" on the navigation bar, it should jump to "SEC 2" part. Now the problem is when you click the one you want to go, the previous one gets highlighted. For example, if you click "SEC 2", the "SEC 1" on the navigation bar gets highlighted. As I don't know whats wrong with the code I paste it down here.
If you don't know what's the problem: Run the first code snippet, click the SEC 4 on the navigation bar, and then you know what's the problem: jump to SEC 4 part but highlight the SEC 3 on the navigation bar. (latest Chrome and latest Windows 10)
The function I need:
Highlight the SEC- I'm currently reading on the navigation bar
Jump to the SEC- I clicked
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>TEST</title>
<style type="text/css">
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
header {
padding: 1em;
}
nav {
position: sticky;
top: 0;
color: #000;
background-color: yellow;
border-bottom: 2px solid yellow;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em 1em 1em 0;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline;
color: #000;
text-decoration: none;
padding: 1em;
}
nav ul li a.current {
border-bottom: 2px solid blue;
}
main {
}
section {
padding: 5em 1em 1em 1em;
}
footer {
background-color: #000;
color: #fff;
margin-top: 5em;
padding: 1em;
}
</style>
</head>
<body>
<header> Header here </header>
<nav>
<ul>
<li>SEC 1</li>
<li>SEC 2</li>
<li>SEC 3</li>
<li>SEC 4</li>
</ul>
</nav>
<main>
<section id="section-1">
<h3>SEC 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum sit amet justo donec enim diam vulputate ut pharetra. Et ultrices neque ornare aenean. Vulputate mi sit amet mauris commodo. Pulvinar mattis nunc sed blandit. Aliquam ut porttitor leo a diam sollicitudin tempor. Dolor purus non enim praesent elementum facilisis leo. Consequat semper viverra nam libero justo laoreet sit amet. Ornare suspendisse sed nisi lacus. Sed viverra tellus in hac habitasse. Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed adipiscing diam donec adipiscing tristique risus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Pretium aenean pharetra magna ac placerat. Tellus integer feugiat scelerisque varius.</section>
<section id="section-2">
<h3>SEC 2</h3>
Duis tristique sollicitudin nibh sit amet. Facilisis leo vel fringilla est. Erat nam at lectus urna. Ut sem viverra aliquet eget sit amet tellus. Vulputate sapien nec sagittis aliquam. Tortor condimentum lacinia quis vel. Eget magna fermentum iaculis eu. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Velit laoreet id donec ultrices tincidunt. Facilisi nullam vehicula ipsum a arcu. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Vitae purus faucibus ornare suspendisse sed nisi lacus. A arcu cursus vitae congue mauris rhoncus aenean.</section>
<section id="section-3">
<h3>SEC 3</h3>
Aliquam sem et tortor consequat. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Vel eros donec ac odio tempor orci dapibus ultrices. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. At auctor urna nunc id cursus metus aliquam eleifend. Consequat mauris nunc congue nisi vitae. In massa tempor nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et leo duis ut diam quam. Convallis tellus id interdum velit. Pretium fusce id velit ut tortor. Aliquam malesuada bibendum arcu vitae elementum curabitur. Elementum integer enim neque volutpat ac tincidunt vitae. Nulla porttitor massa id neque aliquam. Quisque id diam vel quam elementum pulvinar. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi.</section>
<section id="section-4">
<h3>SEC 4</h3>
Tortor pretium viverra suspendisse potenti. Iaculis eu non diam phasellus. Nulla pharetra diam sit amet nisl. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Cras adipiscing enim eu turpis egestas pretium. Tellus mauris a diam maecenas sed enim ut sem. Amet est placerat in egestas. Volutpat lacus laoreet non curabitur. Eget nullam non nisi est sit amet. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Massa massa ultricies mi quis. Volutpat sed cras ornare arcu. Varius duis at consectetur lorem. Odio euismod lacinia at quis risus.</section>
</main>
<footer>Footer here</footer>
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
</script>
</body>
</html>
Solution by Tore Brandtzæg (Thanks! But "Currently at SEC-" function is lost)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>TEST</title>
<style type="text/css">
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
header {
padding: 1em;
}
nav {
position: sticky;
top: 0;
color: #000;
background-color: yellow;
border-bottom: 2px solid yellow;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em 1em 1em 0;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline;
color: #000;
text-decoration: none;
padding: 1em;
}
nav ul li a.current {
border-bottom: 2px solid blue;
}
main {
}
section {
padding: 5em 1em 1em 1em;
}
footer {
background-color: #000;
color: #fff;
margin-top: 5em;
padding: 1em;
}
</style>
</head>
<body>
<header> Header here </header>
<nav>
<ul>
<li>SEC 1</li>
<li>SEC 2</li>
<li>SEC 3</li>
<li>SEC 4</li>
</ul>
</nav>
<main>
<section id="section-1">
<h3>SEC 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum sit amet justo donec enim diam vulputate ut pharetra. Et ultrices neque ornare aenean. Vulputate mi sit amet mauris commodo. Pulvinar mattis nunc sed blandit. Aliquam ut porttitor leo a diam sollicitudin tempor. Dolor purus non enim praesent elementum facilisis leo. Consequat semper viverra nam libero justo laoreet sit amet. Ornare suspendisse sed nisi lacus. Sed viverra tellus in hac habitasse. Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed adipiscing diam donec adipiscing tristique risus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Pretium aenean pharetra magna ac placerat. Tellus integer feugiat scelerisque varius.</section>
<section id="section-2">
<h3>SEC 2</h3>
Duis tristique sollicitudin nibh sit amet. Facilisis leo vel fringilla est. Erat nam at lectus urna. Ut sem viverra aliquet eget sit amet tellus. Vulputate sapien nec sagittis aliquam. Tortor condimentum lacinia quis vel. Eget magna fermentum iaculis eu. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Velit laoreet id donec ultrices tincidunt. Facilisi nullam vehicula ipsum a arcu. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Vitae purus faucibus ornare suspendisse sed nisi lacus. A arcu cursus vitae congue mauris rhoncus aenean.</section>
<section id="section-3">
<h3>SEC 3</h3>
Aliquam sem et tortor consequat. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Vel eros donec ac odio tempor orci dapibus ultrices. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. At auctor urna nunc id cursus metus aliquam eleifend. Consequat mauris nunc congue nisi vitae. In massa tempor nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et leo duis ut diam quam. Convallis tellus id interdum velit. Pretium fusce id velit ut tortor. Aliquam malesuada bibendum arcu vitae elementum curabitur. Elementum integer enim neque volutpat ac tincidunt vitae. Nulla porttitor massa id neque aliquam. Quisque id diam vel quam elementum pulvinar. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi.</section>
<section id="section-4">
<h3>SEC 4</h3>
Mauris rhoncus aenean vel elit scelerisque. Auctor elit sed vulputate mi sit amet mauris commodo quis. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. In fermentum posuere urna nec tincidunt. Condimentum lacinia quis vel eros donec ac. Mattis rhoncus urna neque viverra justo. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. In pellentesque massa placerat duis ultricies. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Ipsum dolor sit amet consectetur adipiscing elit duis. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Ut porttitor leo a diam sollicitudin. Ut etiam sit amet nisl purus in mollis nunc sed. Habitant morbi tristique senectus et netus. Laoreet sit amet cursus sit amet dictum sit amet. Natoque penatibus et magnis dis parturient montes nascetur. Nulla pellentesque dignissim enim sit amet venenatis urna.<br>
Cras semper auctor neque vitae tempus quam pellentesque nec nam. Sodales ut etiam sit amet nisl. Ut consequat semper viverra nam libero justo laoreet sit. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc congue nisi vitae suscipit tellus mauris. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Commodo odio aenean sed adipiscing diam. Nisi lacus sed viverra tellus in hac habitasse. Arcu cursus vitae congue mauris rhoncus aenean. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Proin sed libero enim sed faucibus. Libero volutpat sed cras ornare. Ornare arcu odio ut sem nulla pharetra diam sit. Praesent tristique magna sit amet.<br>
Porta non pulvinar neque laoreet suspendisse interdum consectetur. Cras fermentum odio eu feugiat pretium nibh. Purus gravida quis blandit turpis cursus. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Ut placerat orci nulla pellentesque dignissim enim sit amet. Leo duis ut diam quam nulla porttitor massa id neque. Dignissim convallis aenean et tortor at. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Sit amet porttitor eget dolor morbi non arcu risus. Mi sit amet mauris commodo.</section>
</main>
<footer>Footer here</footer>
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let clickEventListener = event => {
mainNavLinks.forEach(link => link.classList.remove("current"));
event.target.classList.add("current");
};
mainNavLinks.forEach(link => link.addEventListener('click', clickEventListener));
</script>
</body>
</html>

Not sure if this fits your requirements, but an alternative solution is to add a click event listener to each nav link, which deselects all other nav links and selects the one that was clicked.
This could be done by replacing the script part with something like the following:
let mainNavLinks = document.querySelectorAll("nav ul li a");
let clickEventListener = event => {
mainNavLinks.forEach(link => link.classList.remove("current"));
event.target.classList.add("current");
};
mainNavLinks.forEach(link => link.addEventListener('click', clickEventListener));
At least for me, this seems to resolve the issues when clicking the links.
Edit: Just realized that you probably want the scroll functionality as well, which this solution does not include.

Changing the order of html using jQuery

I have a function that displays and hides content. The only thing I cant figure out is how to always have the most recently displayed element always display on top of the others as they fade out. If you click the buttons left to right you can see how I want it to work. But right to left doesn't work the same way due to the order of the html. I thought about using index but I couldn't think of how to get it to work. Help me?
$(document).ready(function(){
$(".click").click(function(){
var current_sec = $(this).data("section");
$(".sections").not(this).removeClass("show");
$('.click').not(this).removeClass("clicked");
if($(this).hasClass("clicked")){
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else{
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
$(".show_all").removeClass("all_open");
$(".show_all").html("Our skills");
}
});
$(".show_all").click(function(){
if($(".show_all").hasClass("all_open")){
$(".sections").removeClass("show");
$(".show_all").removeClass("all_open");
$(".click").removeClass("clicked");
$(".show_all").html("Our skills");
} else{
$(".sections").addClass("show");
$(".show_all").addClass("all_open");
$(".show_all").html("close skills");
}
});
});
.click{
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one{
background-color: lightblue;
}
#two{
background-color: yellow;
}
#three{
background-color: red;
}
#four{
background-color: orange;
}
.sections{
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
opacity: 0;
transition: all 1.5s ease;
}
.show{
opacity: 1;
max-height: 1000px;
}
#section_1{
background-color: lightblue;
}
#section_2{
background-color: yellow;
}
#section_3{
background-color: red;
}
#section_4{
background-color: orange;
}
.show_all{
font-weight: 800;
color: black;
}
<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>
<div class="sections" id="section_1">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<div class="sections" id="section_2">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<div class="sections" id="section_3">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<div class="sections" id="section_4">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

Like this but you have an effect new problem.
...
$(this).removeClass("clicked");
} else{
// move the div on top, after last .click
$('.click:last').after( $("#" + current_sec));
$(this).addClass("clicked");
...

Store a z-index in a variable. Increment it on each click, and assign it to the shown section. This way, the latest shown section will always be on top.
var zIndex = 1;
$(".click").click(function(){
// ...
$("#" + current_sec).addClass("show").css("z-index", ++zIndex)
}

how can I have multiple tabbed boxes on one page

I am struggling to get multiple instances of this tabbed box on one page. I am very new to jquery, and the code I have is copied. The tabbed box works fine, but multiple instances cause problems.
The HTML:
<ul class="tabs">
<li class="active" rel="tab1"> Single Wall Cases</li>
<li rel="tab2">Double Wall Cases</li>
<li rel="tab3">Heavy Duty Cases</li>
<li rel="tab4">Wardrobe Cartons</li>
<li rel="tab5">Archive Boxes</li>
<li rel="tab6">Stitched Wallets</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab4 -->
<div id="tab5" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab5 -->
<div id="tab6" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab6 -->
The CSS:
ul.tabs {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
/* [disabled]border-bottom: 1px solid #999999; */
/* [disabled]border-left: 1px solid #999999; */
width: 100%;
}
ul.tabs li {
margin-top: 0;
margin-right: 0;
margin-left: 2px;
margin-bottom: 0;
cursor: pointer;
padding: 0px 21px;
height: 31px;
line-height: 31px;
border-color: rgba(37,37,37,1.00);
border-left-style: solid;
/* [disabled]border-right-style: solid; */
/* [disabled]border-bottom-style: solid; */
/* [disabled]border-top-style: solid; */
border-width: 1px;
overflow: hidden;
position: relative;
font-family: abel;
font-style: normal;
font-weight: 400;
color: rgba(37,37,37,1.00);
float: left;
}
ul.tabs li:hover {
background: #CCCCCC;
color: rgba(37,37,37,1.00);
}
ul.tabs li.active{
background-color: #8DDF2D;
border-bottom: 1px solid #FFFFFF;
color: rgba(37,37,37,1.00);
}
.tab_container {
border: 1px solid #999999;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
#media (max-width: 600px){
ul.tabs li {
padding-top: 0px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
margin: 0;
font-size: 77%;
float: none;
width: 92px;
}
ul.tabs {
}
.tab_container {
margin-top: 175px;
}
And the Jquery:
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
See the jsfiddle!
I have multiple section tags on my page, and would like this tabbed box in each section.

Here is a working example of the Tabs you wish to have. Check out the code snippet. I hope that is what you are looking for.
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
ul.tabs {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
/* [disabled]border-bottom: 1px solid #999999; */
/* [disabled]border-left: 1px solid #999999; */
width: 100%;
}
ul.tabs li {
margin-top: 0;
margin-right: 0;
margin-left: 2px;
margin-bottom: 0;
cursor: pointer;
padding: 0px 21px;
height: 31px;
line-height: 31px;
display:inline;
border-color: rgba(37,37,37,1.00);
border-left-style: solid;
/* [disabled]border-right-style: solid; */
/* [disabled]border-bottom-style: solid; */
/* [disabled]border-top-style: solid; */
border-width: 1px;
overflow: hidden;
position: relative;
font-family: abel;
font-style: normal;
font-weight: 400;
color: rgba(37,37,37,1.00);
float: left;
}
ul.tabs li:hover {
background: #CCCCCC;
color: rgba(37,37,37,1.00);
}
ul.tabs li.active{
background-color: #8DDF2D;
border-bottom: 1px solid #FFFFFF;
color: rgba(37,37,37,1.00);
}
.tab_container {
border: 1px solid #999999;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
#media (max-width: 600px){
ul.tabs li {
padding-top: 0px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
margin: 0;
font-size: 77%;
float: none;
width: 92px;
}
ul.tabs {
}
.tab_container {
margin-top: 175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active" rel="tab1"> Single Wall Cases</li>
<li rel="tab2">Double Wall Cases</li>
<li rel="tab3">Heavy Duty Cases</li>
<li rel="tab4">Wardrobe Cartons</li>
<li rel="tab5">Archive Boxes</li>
<li rel="tab6">Stitched Wallets</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab4 -->
<div id="tab5" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab5 -->
<div id="tab6" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab6 -->
The issue was with display attribute in css

Categories