I am trying to display a content DIV with a link of expand and collapse.
In my content DIV there is a unorder list. when the page is open I want to display only two list item with a expand link. If user need to view other list item they need to click on expand link. After expand the DIV link text must be change to Collapse. And also if in my unorder list have only 2 items then no need to display a link.
NOTE: unorder list is generating dynamically using PHP.
My HTML is something like this -
<div id="mycontent">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p>+ View More<p>
</div>
My Jquery -
$("a").click(function(){
$("#mycontent").toggle();
});
This is my code so far - http://jsbin.com/mojuteve/1/edit
Can anybody tell me how can I do this?
Thank You.
$(function() {
$("#mycontent li:gt(1)").hide(); // Initially show only first two items
if ($("#mycontent li").length <= 2) {
// Hide "View More" if there are no more to show
$("#showmore").hide();
}
$("#showmore").click(function() {
$("#mycontent li:hidden").slideDown();
$("#showmore,#collapse").toggle();
return false; // Prevent following the link
});
$("#collapse").click(function() {
$("#mycontent li:gt(1)").slideUp();
$("#showmore,#collapse").toggle();
return false; // Prevent following the link
});
});
Use the following HTML:
<div id="mycontent">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p><a id="showmore" href="#">+ View More</a>
<a id="collapse" href="#">- Collapse</a><p>
</div>
And CSS:
#collapse {
display:none;
}
Try this fiddle: http://jsfiddle.net/Bn92C/2/
The code you should use, it will toggle the text within the "a"
$(function(){
$(".mycontent").hide();
$("a").click(function(){
$(".mycontent").slideToggle("fast");
$(this).toggleClass("more");
if($("a").hasClass("more")) {
$("a").text("- View Less");
} else {
$("a").text("+ View More");
}
});
});
How about this:
CSS:
#mycontent {
background: #fff;
overflow: hidden;
}
#mycontent > ul {
display: block;
width: 400px;
}
#mycontent > ul > li {
display: inline-block;
padding: 0 20px 10px 0;
}
#mycontent > ul > li + li + li {
display: none;
}
#mycontent p {
float: right;
padding: 0 20px;
}
#mycontent.visible ul > li {
display: inline-block;
}
jQuery:
//Check if the list items are less than 3 and if so remove the more link
(function () {
var listLenght = $('#mycontent ul li').length;
if (listLenght < 3) {
$('#mycontent a').remove();
}
})();
//Variable for the text change
var linkText = ['+ View More', '- Collapse'];
$('a').on('click', function (e) {
e.preventDefault();
var $this = $(this);
// Better practice to toggle classes instead of using show/hide
$('#mycontent').toggleClass('visible');
//Text Change
if($this.text() === linkText[0]){
$this.text(linkText[1]);
}else{
$this.text(linkText[0]);
}
})
But checking if the list length is 2 or less will be better to be done with php not js.
Demo
Related
In given below code I want to include show and hidden feature.
There are three header tags with the unordered list in my code.
By default all unordered list are hidden.
When I click on first header then it displays its corresponding unordered list.After it if I click on second/third header then it is not hiding previously opened unordered list.
What i want : when clicking on a header, previously opened unordered list must not display.
Try to understand my question by running below code.
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Help me...
You just need to select all the already .show and change them to .hidden and then atlast changed the clicked header children to .show. In this way only 1 <ul> will have class show
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
document.querySelectorAll('ul.show').forEach(ul=>{
ul.className="hidden"
})
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show < div < article < main > ul{
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Make sure you only add the click eventlistener to the headers, not all elements! Also before you add the show class to the ul belonging to the header, first remove all other show classes from the ul's of the other headers. I have also changed the adding of the show class to toggling of the show class so on a second click on the same header the menu closes again:
//JAVASCRIPT
var selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
for (let i = 0; i < selectAllHeader.length; i++) {
selectAllHeader[i].parentNode.children[1].classList.remove("show");
}
let parent = e.target.parentNode.children[1]; // selects ul
parent.classList.toggle("show");
}
for (let i = 0; i < selectAllHeader.length; i++) {
selectAllHeader[i].addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
let selectAllUL = Array.from(selectAllHeader).map(header => header.parentNode.querySelector('ul'));
function show_article(e) {
let parent = e.target.parentNode.querySelector('ul') // selects ul
selectAllUL.forEach(function(node) {
node.classList.remove('show');
node.classList.add('hidden');
});
parent.classList.add('show');
parent.classList.remove('hidden');
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Not the most elegant solution. But should solve the problem at hand.
You can remove the .show class from all your elements and replace it with hidden, and only once you have done that add the .show class to the click element.
See working example below:
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
[...document.querySelectorAll('.show')].forEach(elem => {
elem.classList.remove('show');
elem.classList.add("hidden");
});
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Is there any way to set width of a <div> using a conditional operator on the size of text within it?
For example, if there are 60 characters or less, width should be 500px else, 700px.
This works fine upto some extent:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
display:block;
min-width: 600px;
margin: 2px;
text-align: left;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
Output:
But, when I increase the number of characters of the first child <div>, I get this:
I want all the container elements to shift down once an element crosses a specific character limit, say, 60 characters.
EDIT:
What I wanted is this:
(image)
You could more easily do this with CSS Grid than with flexbox layout; here we take advantage of the minmax() function to determine the column width (bearing in mind we're explicitly styling the whole column, not just the specific 'cell' of content):
grid-template-columns: repeat(2, minmax(min-content, 700px));
Here we use the repeat() function to create two columns, each column assigned a minimum width of 500px or a maximum width of 700px.
This gives the following output:
.flex-container {
display: grid;
grid-template-columns: repeat(2, minmax(500px, 700px));
grid-template-rows: repeat(2, 1fr);
}
.flex-container>div {
white-space: nowrap;
overflow: hidden;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
References:
minmax().
repeat().
"Basic concepts of grid layout."
You can do this with jQuery. Run a loop and check all the element, and if one of the element has more than 60 character you apply a width to all of them.
var elem = $('.flex-container > div');
for (var i = 0; i < elem.length; i++) {
if (elem.eq(i).text().length > 60) {
elem.css('width', '600px');
break;
}
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container>div {
display: block;
min-width: 300px;
margin: 2px;
text-align: left;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ips </div>
</div>
You can resolve this with JavaScript, using the string length property and a condition.
1) Create a variable in JavaScript to access the div you created using : document.getElementsByTagName("div").innerHTML;
2) Use the if. In the condition use the length property and a compactor to see if the length is bigger then a certain number of characters.
3) In the statements add document.getElementsByTagName("div").style.width = x; and modify the width by the number you want by changing x.
Using a conditional operator, you've set the size of a div depending on the size of text.
I've been trying to create an unordered List in Html.
A css class will be attached with the "ul" element and its child "li" elements.
The issue is if another "unordered List" becomes child element of this parent unordered List.
I've created following sample to show my issue:-
Javascript:-
$(function () {
$('.marquee').marquee({
duration: 10000,
duplicate: false,
delayBeforeStart:0,
allowCss3Support: true,
gap: 600,
});
});
HTML:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<ul class='marquee'>
<li>1. Longer text lorem ipsum dolor sit amet,<h3>consectetur adipiscing elit END</h3></li>
<li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li><ul><li><b>I'm the Child Unordered List Element. I don't want this CSS</b></li></ul></li>
</ul>
CSS:-
body {
margin: 10px;
font-family:'Lato', sans-serif;
}
.marquee {
width: 100%;
overflow: hidden;
border:1px solid #ccc;
background: black;
color: rgb(202, 255, 195);
}
ul.marquee li {
display: inline-block;
padding: 10px 20px;
}
Jsfiddle
Can any one suggest how to remove the CSS class "marquee" from the Child Unordered List?
Thanks in advance.
Please share the code in your question. For now which i understood by your statement, that can be achieved by using below code (replace '.xyz' with actual class)
jQuery("ul.xyz").find("ul.xyz").removeClass(".xyz");
I've noticed your ul within the parent ul is not within a li. Make sure any child element in a list is within a li element.
hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.
If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/
I have a div with some p's inside and want to put buttons to the side of some p's. Only some of the buttons show up, and I will control which ones through Javascript. Usually, I would put each p in a different wrapper div, which would also contains the corresponding button. BUT I want a background image around all p's, so I need to put all p's inside the same div and can't have separate div's for each p. I also don't want the background to appear around the buttons, which will be round. How do I align the buttons with the p's? Should I use jQuery to get the top properties of each p and pass them on to the buttons?
JS fiddle: http://jsfiddle.net/bw22yht1/
HTML:
<body>
<div class="content">
<div class="p-wrapper">
<!--there is a background image here-->
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
</body>
CSS:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
}
.p-wrapper
{
background-image:url('bg/old-paper-texture.jpg');
background-size:cover;
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
}
actual page: http://cin.ufpe.br/~rvcam/map/
EDIT: An image that shows what I need:
I took a look to your page, and you simply need to change your approach
<div class="content">
<ol class="p-wrapper">
<!--there is a background image here-->
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
</ol>
</div>
You'll have what you need AND no need for that additional span, you'll have automatic numering
EDIT: See code below to fit your needs.
HTML mostly remains the same, just change <ol class="p-wrapper"> to <ol class="bible"> and add buttons
<div class="content">
<ol class="bible">
<!--there is a background image here-->
<li><div class="bibletext">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div> <div class="but"><button></button></div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div><div class="but"><button></button></div></li>
</ol>
</div>
CSS as follows:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
background:url('bg/old-paper-texture.jpg') repeat-y;
background-size:700px; /* your current .bible width */
}
.bible
{
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
color: white;
/*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*700 px + button width, change at will */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}
Then you'll need some adjustments to fit your taste, but this will work just as you want
You can absolutely position a <div> with white background containing the <button> aside the <p> in a common <div> as follows:
<div class="demo">
<p>lorem ipsum lorem ipsum</p>
<div class="right">
<button>Button</button>
</div>
</div>
<div>'s are transparent by default so having a common parent <div> won't hide the background of the wrapper.
You can then align the button using following:
CSS:
p {
margin-right:200px;
}
.demo {
position:relative;
}
.right {
position:absolute;
top:0;
bottom:0;
right:0;
width:200px;
background:white;
}
.demo button {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100px;
height:20px;
margin:auto;
}
Demo