Sherman_Meow
Reputation: 247
HTML&CSS Is there a better way to do this instead of duplicating?
Right now I'm trying to build a list-group with toggle function, which is shown as following:
So basically what I expecting is that when I click the blue arrow on one of the list item, the corresponding item will be toggled and the detail will be expanded, and when I click the blue arrow again, the detail will collapse.
And within the details, I would like to have multiple blocks, just as below:
Yet, my code right now is like:
<!DOCTYPE html>
<html>
<head>
<title>Details</title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
body {
width: 100%;
margin: 0 auto;
}
#trailBar {
margin-left: 35px;
margin-right: 35px;
margin-top: 25px;
margin-bottom: 25px;
height: 180px;
background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
border: transparent;
border-radius: 0.25em;
}
p.trailTextTop {
padding-top: 25px;
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
p.trailTextBot {
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
.left {
float: left;
}
.right {
float: right;
}
p {
overflow: hidden;
}
.panel-group .list-group {
margin-bottom: 0;
}
.panel-group .list-group .list-group-item {
border-radius: 0;
border-left: none;
border-right: none;
}
.panel-group .list-group .list-group-item:last-child {
border-bottom: none;
}
.panel-body {
background: #efefef;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>Collapse (as seen in documenatation)</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
</p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
</p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
</p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
</p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
</p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</body>
</html>In my code I'm generating the blocks in a very stupid way, which is copy and paste and again and again.
My question is if there's a way to define a class of the following block in html/css level so that I can call it anytime anywhere I need it just like a java class?
Thanks in advance!!
Upvotes: 1
Views: 71
Answers (1)
om_jaipur
Reputation: 2196
I have a custom script for accordion:
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
if ($(this).hasClass("opened") == true) {
$(this).next().slideUp("slow");
$(this).removeClass('opened');
} else {
$(".opened").next().slideUp("slow");
$(".opened").removeClass("opened");
$(this).addClass('opened');
$(this).next().slideDown("slow");
}
});.accordionOm {
position: relative;
padding: 10px 0 10px 30px;
margin: 0;
font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
cursor: pointer;
}
.accordionOm:hover {
color: #000;
}
.accordionOm:before,
.accordionOm:after {
content: "";
position: absolute;
background: #333;
display: inline-block;
}
.accordionOm:before {
width: 20px;
height: 2px;
left: 0;
top: 22px;
}
.accordionOm:after {
width: 2px;
height: 20px;
left: 9px;
top: 13px;
transition: transform .5s;
transform: rotate(0);
}
.accordionOm.opened:after {
transform: rotate(90deg);
}
.accordionOm + div {
border-left: 4px solid #999;
padding: 0 15px;
margin-left: 8px;
font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
color: #666;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>If you want it with arrows, you can customize it using your css.
Upvotes: 1
Related Questions
- How to avoid the duplication is css?
- Is there any way to compact this redundant code?
- Does anyone have a better way to do this? Im just learning how to play around with CSS
- Better way to do this in CSS?
- Avoiding duplicating CSS styles?
- Reusing CSS LESS code
- css tricks to shorten my redundant code
- Better way of writing this CSS so there is not so much repetition of code?
- A better way to write this HTML/CSS?
- Is there a better way to do this?