Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm a trying to understand how i can make the grid correct for my needs, but i broken my mind. Sorry for my english - just look at the screenshots.
>What I'm getting!<
>What I need!<
Its quite simple, all what you need is to ensure that logo wrapper will be big enough. You can also use div with .clearfix class or enforce height via css. Here is working example
http://codepen.io/anon/pen/MyGKEL
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#logo img {
width: 100%;
height: auto;
}
#sidebar {
border: 1px solid black;
clear: both;
float: left;
}
#logo {
padding: 10px 0
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="logo">
<img src="http://dummyimage.com/200x400" width="100%" />
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-4" id="phone">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-10" id="nav">
<nav class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="col-md-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo aLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut
</div>
</div>
<div class="col-md-2" id="sidebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
</div>
</div>
</div>
</body>
</html>
Related
I used col-md-4 and but The "more" button doesn't remain fixed in position. I want the border to be in bottom on mobile view and on side of in tab or desktop view as shown in the pictures.
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-12">
<div class="texts">
<h4>Latest News</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
</div>
<button class="btn btn-primary">More</button>
</div>
<div class="col-sm-4 ">
<div class="texts">
<h4>Feel free to Communicate</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
</div>
<button class="btn btn-primary">More</button>
</div>
<div class="col-sm-4">
<div class="texts">
<h4>Our facilities</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
</div>
<button class="btn btn-primary">More</button>
</div>
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.borderstyle{
border-right: 1px solid #CCC;
}
#media (min-width: 992px) {
.borderstyle{
border-right :none
}
}
media
</style>
</head>
<body><div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-lg-12">
<div class="texts borderstyle">
<h4>Latest News</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
<div class="row">
<div class="col">
<button class="btn btn-primary float-right">More</button>
</div>
</div>
</div>
<hr class="d-none d-lg-block">
</div>
<div class="col-sm-4 col-lg-12">
<div class="texts borderstyle" >
<h4>Feel free to Communicate</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
<div class="row">
<div class="col">
<button class="btn btn-primary float-right">More</button>
</div>
</div>
<hr class="d-none d-lg-block">
</div>
</div>
<div class="col-sm-4 col-lg-12 borderstyle">
<div class="texts">
<h4>Our facilities</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
<div class="row">
<div class="col">
<button class="btn btn-primary float-right">More</button>
</div>
</div>
<hr class="d-none d-lg-block">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
you can use bootstrap class float-right to push the button to right of the div and for border you can use combination of 'hr tag' with border class visible on resposive breakpoint.
After achieving functionality you can beautify your html as you want ...:)
you just need to add the css property float:right to all your buttons
good luck!
I want to have a responsive three columns, 33.33% width each.
The last column is the main one, and the height of whole content cannot be higher than the last column height. However, first two columns presents list of divs with text, one by one and the height of them might be higher than third column. I want to hide an overflow of first two columns, I'm fine if some text divs won't be visible. The most challenging is to hide partially visible text divs in the bottom of content.
I made something like this:
.content { width: 800px; display: table; table-layout: fixed; background-color: #fff}
.oneandtwo {width: 66.66%; display: table-cell; position: relative; overflow: hidden; vertical-align: top;}
.oneandtwocontainer {display: table; table-layout: fixed; position: absolute; }
.one, .two {width: 50%; display: table-cell; vertical-align: top;}
.third {width: 33.33%; display: table-cell; background-color: #ddd; vertical-align: top;}
.text {padding: 10px; border: 1px dotted black}
.shouldbehidden {background-color: #fca2a2 }
<div class="content">
<div class="oneandtwo">
<div class="oneandtwocontainer">
<div class="one">
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden" > Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
</div>
<div class="two">
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
</div>
</div>
</div>
<div class="third">
<div class="text"> Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. </div>
</div>
</div>
Height of the content is adjusting to the height of third column, thanks to position - relative / absolute and overflow:hide. However I want all the red text boxes in this example make invisible - a truncated text looks very bad.
I guess I can do this with flex layout, but don't know really how.
I know javascript can solve the problem (with jQuery outerHeight() calculation for example), but first I would like to try with pure css.
Any ideas?
Something like this?
* {
box-sizing: border-box;
}
.content {
position: relative;
overflow: hidden;
}
.one,
.two,
.three {
width: 33.3%;
padding: 0 1em;
}
.one,
.two {
position: absolute;
}
.one {
left: 0;
}
.two {
left: 33.3%
}
.three {
position: relative;
left: 66.6%;
}
<div class="content">
<div class="oneandtwo">
<div class="oneandtwocontainer">
<div class="one">
<div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
</div>
<div class="two">
<div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
<div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
</div>
</div>
</div>
<div class="three">
<div class="text">Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Maecenas malesuada elit lectus felis, malesuada ultricies.
Curabitur et ligula. Ut molestie a, ultricies porta urna.</div>
</div>
</div>
.content { width: 800px; display: table; table-layout: fixed; background-color: #fff}
.oneandtwo {width: 66.66%; display: table-cell; position: relative; overflow: hidden; vertical-align: top;}
.oneandtwocontainer {display: table; table-layout: fixed; position: absolute; }
.one, .two {width: 50%; display: table-cell; vertical-align: top;}
.third {width: 33.33%; display: table-cell; background-color: #ddd; vertical-align: top;}
.text {padding: 10px; border: 1px dotted black;background-color:#fff;}
.shouldbehidden ,.oneandtwo{background-color: #fca2a2 }
<html>
<div class="content">
<div class="oneandtwo">
<div class="oneandtwocontainer">
<div class="one">
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden" > Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
</div>
<div class="two">
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. </div>
</div>
</div>
</div>
<div class="third">
<div class="text"> Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. </div>
</div>
</div>
</html>
I want to affix the following code to the top of the page, below the nav so it is always visible.
<div class="col-lg-5 nopadd affix">
<h3>Project One</h3>
<p>Lorem ipsum dolor ...</p>
</div>
However when I add the bootstrap .affix it makes it ignore the col-lg-5 class that has been applied.
Here is the code I have so far.
http://jsfiddle.net/P9d5k/2/
http://jsfiddle.net/P9d5k/2/embedded/result/
try this fiddle
I just add a 100% width div with the affix class and inside a .container with your grid inside
<div class="affix" style="width:100%;z-index:2">
<div class="container">
<div class="col-lg-5">
<h3>Project One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p>
</div>
</div>
</div>
here's what I wan't to create: http://i.imgur.com/9KdL0UW.jpg, here's what I have: http://i.imgur.com/mRDWoRo.jpg. My problem is the layout of news, as you can see, it's not working properly. I'm working with 960 grid and don't know how to reference it in the fiddle, so i posted is as an image instead.
html:
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<!--FEATURED NEWS-->
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<!--NEWEST-->
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
css:
.grid_3{
background-color: orange;
margin-bottom:10px;}
.grid_9 {
background-color: pink;}
.highlightednews{
float:left;}
.featurednews{
float:right;
background-color:green;
clear:both;}
Your problem here is to do with how your elements are nested. You need to have two parent divs to hold your content like so
<!-- THIS IS THE LEFT COLUMN -->
<div class="grid_9">
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_9">
Full width item
</div>
</div>
<!-- THIS IS THE RIGHT COLUMN -->
<div class="grid_3">
<div>FEATURED NEWS ITEM</div>
<div>FEATURED NEWS ITEM</div>
</div>
I'm adding a collapse function to my page, and so far it all works as it should.
I use my header text (h2) to toggle the function like this:
<h2>Header 1</h2>
Now, I want to add an image to the start of this. When collapsed, it's a plus-sign image. When opened, it turns into a minus-sign image.
How do I do this?
I think I've got the css part figured out, and the function (code below), but just not sure how to get the images to show.
.toggleButton{
display:inline;
background-image:url(Special_images/pluss3.gif);
background-size:auto;
background-repeat:no-repeat;
}
.toggleButton.open{
display:inline;
background-image:url(Special_images/minus.gif);
background-size:auto;
background-repeat:no-repeat;
}
<!-- SCRIPT FOR TOGGLE BUTTONS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.toggleButton').click(function(){
$(this).toggleClass("open");
});
});
</script>
<!-- END -->
What I'm trying now, that doesnt work:
<div class="toggleButton"><h2>Header 1</h2></div>
Thanks a lot in advance,
Stian Berg Larsen
EDIT:
This is one of the collapsing divs:
<h2>The Operator in Focus</h2>
<div id="collapse_002">
<p>content goes here.. Bla bla bla bla....</p>
</div>
So this works as it should. When you click on the header the div slides out, showing the text within the div "collapse_002".
Now what I want is to display an image in front of the header, showing either a plus-sign or minus-sign if the div is open or closed.
I have made you a very simple image swap, using toggle, adding open class..basically just swopping background images :
http://jsfiddle.net/934bA/
*Please ignore temp background urls and sizes
Let me know if there is something else.
I hope this gives your the base understanding and that it's very simple...it's basically just an add of and class, and remove of a class = toggle.
BREAKDOWN :
Html
<div class="toggleButton"><h2>Header 1</h2></div>
Script
$(function() {
$('.toggleButton').click(function() {
$(this).toggleClass("open");
});
});
CSS
.toggleButton{
display:inline;
background-image:url(http://upload.wikimedia.org/wikipedia/en/3/35/Plus_sign.jpg);
background-size:20%;
background-repeat:no-repeat;
background-position:left;
padding:20px;
}
.open{
background-image:url(http://userserve-ak.last.fm/serve/252/3850515.jpg);
}
h2 {margin:0px; padding:0px;display:inline;}
p {
margin:0;
padding-left:16px;
float:left;
background-image:url(images/add.png);
background-repeat:no-repeat;
}
p.down {
float:left;
padding-left:16px;
background-image:url(images/delete.png);
background-repeat:no-repeat;
}
.button
{
vertical-align:middle;
}
.question div
{
border:1px solid #CC0000;
background-color:#efefef;
width:580px;
margin-top:5px;
font-size:12px;
padding:5px;
clear:left;
}
.question div a
{
padding-left:20px;
background: transparent url(images/world_go.png) no-repeat center left;
text-decoration:none;
} /
$(document).ready(function() {
$('div.question')
.children('div').hide().end()
.children('p').click(function(){
$(this).toggleClass('down').next().slideToggle("slow");
});
});
<div class="question">
<p class="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
</ul>
</div>
</div>
This is a toggle with plus minus for the front of the paragraph, with a collapse toggle of the paragraph below.
tried background-position: 0 0; ?