Changing the order of html using jQuery

Changing the order of html using jQuery - javascript

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)
}

Related

CSS Text Truncation Vertical Alignment

I have a lorem ipsum text that is truncated. When you press the "readmore »" button it fully displays the text.
My issue is the text shifts up vertically when you press the "readmore »" button.
$(document).ready(function(){
$(".readmore-btn").on("click",function(){
$(".readmore").toggleClass("truncate");
})
});
.truncate {
max-height: 55px;
overflow-y:hidden;
}
.readmore-btn {
color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Text before</h1>
<div class="readmore truncate">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. </p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>

Moving the overflow-y: hidden; from the .truncate class and moving it to the .readmore class resolves the shifting issue.
$(document).ready(function(){
$(".readmore-btn").on("click",function(){
$(".readmore").toggleClass("truncate");
})
});
.readmore {
overflow-y:hidden;
}
.truncate {
max-height: 55px;
}
.readmore-btn {
color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Text before</h1>
<div class="readmore truncate">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. Vestibulum malesuada neque sit amet eros efficitur pharetra. Vestibulum consequat purus sit amet ex euismod, ut consequat tellus vehicula. Proin suscipit in risus ut placerat. Integer porta id libero ac finibus. Ut at tellus turpis. Phasellus dolor erat, ullamcorper a risus ultrices, iaculis malesuada nisl. Integer tellus arcu, sodales quis mattis ac, sagittis eu turpis. Suspendisse tristique tempor pharetra.</p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>

This is caused by the default margins the browsers adds to paragraphs.
Just add
.truncate p{margin:0}
to your css

How to use a the toggle button multiple times efficiently?

I have the following page, which is behaving exactly how I want it to.
However, I know the page can be written more efficiently in two ways:
First and most importantly, I am repeating a javascript function. This is to denote which text should be expanded when its specific button is clicked, but I know the two can be written as one since they share the same type of functionality.
Second, the css is clumsy. I've used !important to override whether text is shown or hidden.
Can someone please suggest the most eloquent rendition of this page?
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.very-hidden {
display: none!important;
}
.mystyle {
display: block!important;
}
</style>
</head>
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand1()">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand2()">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
<script type="text/javascript">
function expand1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("mystyle");
var element = document.getElementById("b1");
element.classList.toggle("very-hidden");
}
function expand2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("mystyle");
var element = document.getElementById("b2");
element.classList.toggle("very-hidden");
}
</script>
</body>

Try this:
Use the same class to hidde the elements, and use the same function passing a variable with the number of the div you are clicking, so you can so you can build the id name of the button and the div.
function expand(number) {
var id = 'myDIV'+ number
var divElement = document.getElementById(id);
divElement.classList.toggle("mystyle");
var idButton = 'b'+ number
var button = document.getElementById(idButton);
button.classList.toggle("hidden");
}
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.mystyle {
display: block;
}
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand('1')">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand('2')">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
</body>
Hope this help you :)

jQuery function that displays and hides content

So I have four boxes each with a data attribute that I use to target four other boxes which I display and hide. I kinda have the function working how I would like.
But say I click box one then box two they are both showing. What I would like is only the box which was clicked last to display while all the others hide. If box one is clicked the box for it will display, if it is clicked again it will hide.
This is what I have so far:
$(document).ready(function(){
$(".click").click(function(){
var current_sec = $(this).data("section");
if($(this).hasClass("clicked")){
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else{
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
}
});
});
.click{
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one{
background-color: blue;
}
#two{
background-color: yellow;
}
#three{
background-color: red;
}
#four{
background-color: orange;
}
.sections{
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
}
.show{
max-height: 1000px;
}
#section_1{
background-color: blue;
}
#section_2{
background-color: yellow;
}
#section_3{
background-color: red;
}
#section_4{
background-color: orange;
}
<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.</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.</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.</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.</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

You need to remove show class whenever the boxes are cleared and secondly, because you need show/hide, you also need to remove clicked class in the else condition:
$(document).ready(function() {
$(".click").click(function() {
$('.sections.show').removeClass('show');
var current_sec = $(this).data("section");
if ($(this).hasClass("clicked")) {
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else {
$('.click.clicked').removeClass('clicked');
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
}
});
});
.click {
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one {
background-color: blue;
}
#two {
background-color: yellow;
}
#three {
background-color: red;
}
#four {
background-color: orange;
}
.sections {
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
}
.show {
max-height: 1000px;
}
#section_1 {
background-color: blue;
}
#section_2 {
background-color: yellow;
}
#section_3 {
background-color: red;
}
#section_4 {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.
</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.
</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.
</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.
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Remove the active classes from click and sections except the current one by using jQuery not() selector:
$(".sections").not(this).removeClass("show");
$('.click').not(this).removeClass("clicked");
See demo below:
$(document).ready(function() {
$(".click").click(function() {
var current_sec = $(this).data("section");
// remove active from other tabs
$(".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");
}
});
});
.click {
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one {
background-color: blue;
}
#two {
background-color: yellow;
}
#three {
background-color: red;
}
#four {
background-color: orange;
}
.sections {
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
}
.show {
max-height: 1000px;
}
#section_1 {
background-color: blue;
}
#section_2 {
background-color: yellow;
}
#section_3 {
background-color: red;
}
#section_4 {
background-color: orange;
}
<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.
</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.
</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.
</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.
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Try adding this to your else as the first line, to remove the show class from any section that was previously shown.
//remove clicked from the previously clicked elements
$('.click.clicked').removeClass('clicked');
//remove show from the reviously shown sections
$('.sections.show').removeClass('show');

You can use straight CSS with showing and hiding. No custom classes necessary. This should be what you are looking for.
$(document).ready(function(){
$(".click").click(function(){
var current_sec = $(this).data("section");
// hide all sections first
$('.sections').css("display", "none");
// find the clicked section id
var clickedId = $(this).attr('data-section');
// show clicked section
$('#' + clickedId).css("display", "");
});
});
.click{
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one{
background-color: blue;
}
#two{
background-color: yellow;
}
#three{
background-color: red;
}
#four{
background-color: orange;
}
.sections{
width: 500px;
font-size: 18px;
overflow: hidden;
}
.show{
max-height: 1000px;
}
#section_1{
background-color: blue;
}
#section_2{
background-color: yellow;
}
#section_3{
background-color: red;
}
#section_4{
background-color: orange;
}
<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.</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.</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.</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.</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

Keep Image and text adjacent to each other

I have a simple fiddle: https://jsfiddle.net/jzhang172/9nfb0gj3/
Without using flexbox, I want to be able to keep the image size static and the paragraph next to it. Right now, the paragraph moves to the next line when re-sizing, how do I keep them next to each other at all times?
img{
height:100px;
width:100px;
display:inline-block;
float:left;
}
p{
float:left;
display:inline-block;
width:300px;
}
<div class="box">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p>
</div>

You do like this, where you set white-space: nowrap on the box and remove float: left on your img and p. I also added vertical-align: top on the img to have it top aligned.
The white-space: nowrap does the trick, telling for inline elements not to break line.
.box {
white-space: nowrap;
}
img{
height:100px;
width:100px;
display:inline-block;
vertical-align: top;
}
p{
white-space: normal;
display:inline-block;
width:300px;
}
<div class="box">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p>
</div>
A 2016 variant would be flex
.box {
display: flex;
}
img{
height:100px;
width:100px;
}
p{
width:300px;
}
<div class="box">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p>
</div>

One okay option is to wrap the img in a container and use percentage based widths:
https://jsfiddle.net/5fs0s4n3/
.img-container{
width: 30%;
float: left;
}
img{
height:100px;
width:100px;
}
p{
float:left;
display:inline-block;
width:70%;
}

You could change the display from inline-block to table and table-cell to achieve this.
.box {
display: table;
table-layout: fixed;
}
.box > * {
display: table-cell;
}
img {
height: 100px;
width: 100px;
}
p {
width: 300px;
}
<div class="box">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod
sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin
metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p>
</div>

Playing with margins solves it: https://jsfiddle.net/oweahea8/1/
img{
height:100px;
width:100px;
display:inline-block;
float:left;
margin-right: -100px;
}
p{
float:left;
display:inline-block;
margin-left: 100px;
}

Jquery - Each loop not working inside click event

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

We Keep Coding

JavaScript is the programming language of the Web.

Changing the order of html using jQuery - javascript

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) }

Related

CSS Text Truncation Vertical Alignment

How to use a the toggle button multiple times efficiently?

jQuery function that displays and hides content

Keep Image and text adjacent to each other

Jquery - Each loop not working inside click event

Categories

Resources