I am trying to use the below foundation5 code. The problem is the content is exposed on load. I need it to be hidden until clicked on. I have been able to hide it but then it will not expand. Any suggestion would be greatly appreciated.
Thank you
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>
As per the Foundation docs, the the class active is used to display the corresponding content. So if you don't want your content to be displayed when the page loads, remove the class active. Additionally, make sure to keep your HTML markup clean. I see a lot of and invalid markup like unclosed tags in the example you provided. Your final markup should look like this:
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content">Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</dd>
</dl>
</div>
</div>
Related
I have created my online portfolio and it works fine on desktop. However, whenever I try it on other devices/smartphones, it's no longer responsive. I have the meta tags on my code and I have also a media query on my css. I'm coding it using bootstrap and external css. Also, another problem I am having is the horizontal scroll on mobile.
PS. Removed some vital info on texts.
Here is the code that I'm having a problem with.
<div class="container">
<h2 class="text-center p-3">PROJECTS</h2>
<div class="row">
<div class="col-md-7 text-center">
<h5 class="educare">Title</h5>
<p class="text-justify py-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/doodle/48/000000/squarespace.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/html.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/css.png"/>
</p>
</div>
<div class="col-md-1 text-left order-md-last order-sm-first">
<img src="..." class="educ-image">
</div>
</div>
<div class="row">
<img src="./images/venture.gif" class="mr-auto venture-gif">
<div class="col-md-7 text-center">
<h5 class="venture-txt">Venture Capital Funds Website</h5>
<p class="text-justify py-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/windows/32/000000/wix.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-photoshop--v1.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-illustrator.png"/>
</p>
</div>
</div>
</div>
The problem with your mobile scroll should be caused by (elements taking more than device width)..
-Check Elements width in the mobile version & make sure they're taking 100% width in certain media queries..
this is the code but I would like clicking on button 2 to deactivate I tried in several ways but something escapes me, I can create the buttons and make them work ... but with each click of a single button the others remain open
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="demo1" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
I'm trying to use the -webkit-line-clamp attribute (as seen https://css-tricks.com/almanac/properties/l/line-clamp/) but it doesn't seem to work with nested tags.
I'm trying to make this sample works :
<html>
<body>
<div style="width:200px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</body>
</html>
My content is generated by quill.js and it's wrapped by multiple p tags. I cannot change that. Do you have any idea of how I can make -webkit-line-clamp (or something similar) works?
If you wrap the two paragraphs in another div, your current code will truncate the displayed text.
Here is a working example:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</body>
</html>
Here is an example using span tags instead of paragraph tags. This approach allows "..." to become visible:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
</div>
</div>
</body>
</html>
What I am looking to do is have an accordion where the top panel of the accordion is a link to another page, and the rest of the accordion functions normally. I've tried some javascript to stop the accordion event, but that does not seem to work. Any pointers?
Yeah looks like first you'd need to delete the interior content so that it doesn't expand. After that, I'd add a class the a tag and write some script on the page to recognize the class and redirect the url. Something like the below:
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="redirect-me" href="http://www.google.com">Accordion 1</a>
</li>
<li class="accordion-navigation">
Accordion 2
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
Accordion 3
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>
Script would look something like this with jQuery:
$(".redirect-me").bind("click",function(){
theUrl = $(this).attr("href");
window.location = theUrl;
});
Kind of a dirty way to do it. But it's a bandaid till you can do the recommended way someone else figures out.
I'm trying to work out how I target the final element within a dynamically generated content set.
For example, all the generated content get spits out like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
In this case I'd like the final paragraph to have a margin-bottom: 0;
But the content could also be generated like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
Where by I'd like the final paragraph within the inner-box div to be given the zero margin.
I've tried adding block-inner:lastchild {margin-bottom:0;} but that doesn't work correctly. Just wondering how the best way to target this. Cheers!
There isn't any robust way to do this. .box > p:last-child will only get you a p element that is a child of .box; it won't match anything in your second example because the last child of .box is .inner-box, not a p.
.box p:last-child is not reliable because it will match all p elements that are the last children of their parents, which means it will match the last child of .inner-box here even though it's not the last p in the entire .box:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
And you have to worry about all the other possible ways the last p element could be nested somehow.
But if you know that the last p element can only ever either be a child of .box, or be a child of the last .inner-box for example, then you can enumerate those two possibilities:
.box > p:last-child,
.box > .inner-box:last-child > p:last-child
If you don't know the class name of that intermediate element you might be able to get away with not qualifying that :last-child at all:
.box > p:last-child,
.box > :last-child > p:last-child
And even then, that does not account for the fact that the last p may not even appear in the last child of .box.
Basically, you need to write a selector accounting for each and every possible nested structure in which the last p element may appear; there is no easy way to say "match the last p descendant of this container in a dynamic structure."
Use p:last-child
This will select the last <p> tag and only apply the styles to it.
.box {
border: solid 1px
}
.box p:last-child {
margin-bottom: 0;
color: red;
}
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>