Positioning a js button under the content it affectsIn Firefox, can I figure out which random word in a div full of words the mouse is hovering?How to make div not larger than its contents?How can I know which radio button is selected via jQuery?jQuery.. div reveal/slide?Dynamically add image in middle of storySelect all words that are not a specific word, via Javascript regex?Proper JSON Response Output inside DivJquery Collapse and expand plugin for bootstrapHow create animation for showCharI want to indent the text below the image
Why don't they build airplanes from 3D printer plastic?
Why didn't Thatcher give Hong Kong to Taiwan?
Punishment in pacifist society
Function of the separated, individual solar cells on Telstar 1 and 2? Why were they "special"?
How can I oppose my advisor granting gift authorship to a collaborator?
Playing boules... IN SPACE!
How to use multiple criteria for -find
Is mathematics truth?
What is the Title of this fable where a Mongoose is getting married
Why do we need explainable AI?
Why wasn't Linda Hamilton in T3?
What percentage of the mass/energy of the universe is in the form of electromagnetic waves?
How to check status of Wi-Fi adapter through command line?
What can prevent a super elevator to a space station from being invented?
When making yogurt, why doesn't bad bacteria grow as well?
Are there any writings by blinded and/or exiled Byzantine emperors?
How do I stop making people jump at home and at work?
Given a specific computer system, is it possible to estimate the actual precise run time of a piece of Assembly code
How can I design a magically-induced coma?
Why is k-means used for non normally distributed data?
What is the significance of 104%
Ideal characterization of almost convergence
Does the Scrying spell require you to have a clear path to the target in order to work?
Is it rude to ask my opponent to resign an online game when they have a lost endgame?
Positioning a js button under the content it affects
In Firefox, can I figure out which random word in a div full of words the mouse is hovering?How to make div not larger than its contents?How can I know which radio button is selected via jQuery?jQuery.. div reveal/slide?Dynamically add image in middle of storySelect all words that are not a specific word, via Javascript regex?Proper JSON Response Output inside DivJquery Collapse and expand plugin for bootstrapHow create animation for showCharI want to indent the text below the image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I have a button which on click expands the div and shows some content. I want it to be positioned at the bottom of the div permanently, same as it is now positioned at the top, but to be down under. I struggle because it affects the event so i can't just move it within the parent div.
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>javascript jquery css
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
|
show 3 more comments
0
I have a button which on click expands the div and shows some content. I want it to be positioned at the bottom of the div permanently, same as it is now positioned at the top, but to be down under. I struggle because it affects the event so i can't just move it within the parent div.
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>javascript jquery css
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
So what is the question? Note you can replace theif()withbox.toggleClass('collapsed')
– charlietfl
Mar 28 at 1:52
How to put the button underneath it all, so it is not on top
– erutuf
Mar 28 at 1:53
You mean move it with jQuery?
– charlietfl
Mar 28 at 1:53
i want it to be permanently, by default, at the bottom of the container div
– erutuf
Mar 28 at 1:56
What's wrong with simply moving<button />under your<div />?
– Dimitri Kopriwa
Mar 28 at 2:04
|
show 3 more comments
0
0
0
I have a button which on click expands the div and shows some content. I want it to be positioned at the bottom of the div permanently, same as it is now positioned at the top, but to be down under. I struggle because it affects the event so i can't just move it within the parent div.
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>javascript jquery css
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
I have a button which on click expands the div and shows some content. I want it to be positioned at the bottom of the div permanently, same as it is now positioned at the top, but to be down under. I struggle because it affects the event so i can't just move it within the parent div.
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div> $('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div> $('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>javascript jquery css
javascript jquery css
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
edited Mar 28 at 1:59
erutuf
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
asked Mar 28 at 1:49
erutuferutuf
366 bronze badges
366 bronze badges
So what is the question? Note you can replace theif()withbox.toggleClass('collapsed')
– charlietfl
Mar 28 at 1:52
How to put the button underneath it all, so it is not on top
– erutuf
Mar 28 at 1:53
You mean move it with jQuery?
– charlietfl
Mar 28 at 1:53
i want it to be permanently, by default, at the bottom of the container div
– erutuf
Mar 28 at 1:56
What's wrong with simply moving<button />under your<div />?
– Dimitri Kopriwa
Mar 28 at 2:04
|
show 3 more comments
So what is the question? Note you can replace theif()withbox.toggleClass('collapsed')
– charlietfl
Mar 28 at 1:52
How to put the button underneath it all, so it is not on top
– erutuf
Mar 28 at 1:53
You mean move it with jQuery?
– charlietfl
Mar 28 at 1:53
i want it to be permanently, by default, at the bottom of the container div
– erutuf
Mar 28 at 1:56
What's wrong with simply moving<button />under your<div />?
– Dimitri Kopriwa
Mar 28 at 2:04
So what is the question? Note you can replace the
if() with box.toggleClass('collapsed')– charlietfl
Mar 28 at 1:52
So what is the question? Note you can replace the
if() with box.toggleClass('collapsed')– charlietfl
Mar 28 at 1:52
How to put the button underneath it all, so it is not on top
– erutuf
Mar 28 at 1:53
How to put the button underneath it all, so it is not on top
– erutuf
Mar 28 at 1:53
You mean move it with jQuery?
– charlietfl
Mar 28 at 1:53
You mean move it with jQuery?
– charlietfl
Mar 28 at 1:53
i want it to be permanently, by default, at the bottom of the container div
– erutuf
Mar 28 at 1:56
i want it to be permanently, by default, at the bottom of the container div
– erutuf
Mar 28 at 1:56
What's wrong with simply moving
<button /> under your <div />?– Dimitri Kopriwa
Mar 28 at 2:04
What's wrong with simply moving
<button /> under your <div />?– Dimitri Kopriwa
Mar 28 at 2:04
|
show 3 more comments
4 Answers
4
active
oldest
votes
0
place the button after the div content collapsed and give the div text overflow:hidden; not the container
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;
.collapsedmax-height:65px;max-width:200px;overflow:hidden;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
add a comment |
0
css way
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
position:absolute;
bottom:0px;
right:0px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>Is this what you want?
HTML BLOCK WAY
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
.container divmax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsed divmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
i am trying to avoid absolute and relative positions since it doesn't work properly if you have more elements
– erutuf
Mar 28 at 2:35
add a comment |
0
You can replace this
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
for
box.classList.toggle('collapsed')
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
that is not what he ask
– Munkhdelger Tumenbayar
Mar 28 at 2:09
add a comment |
0
If I understand correctly you want the button to sit right under the box/container that it will be toggling the visibility for. You should be able to do that using just css. Something like
<div class="container">
<div class="content collapsed">
<div class="text">Mauris dui mio</div>
<button class="collapsible">More</button>
</div>
</div>
moved the button under the content and added a class to the div
.content
display: flex;
flex-direction: column;
align-items: start;
.collapsible
border: none;
width: 60px;
plus the rest of your styles. Then you can have the click function on the button and have the div with .text change height with some logic to check the current height. Also using position absolute could do this as well with something like
.content
position: relative;
.collapsible
position: absolute;
left: 0;
bottom: 100;
I believe its bottom 100. Either that or bottom 0
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55389018%2fpositioning-a-js-button-under-the-content-it-affects%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
place the button after the div content collapsed and give the div text overflow:hidden; not the container
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;
.collapsedmax-height:65px;max-width:200px;overflow:hidden;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
add a comment |
0
place the button after the div content collapsed and give the div text overflow:hidden; not the container
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;
.collapsedmax-height:65px;max-width:200px;overflow:hidden;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
add a comment |
0
0
0
place the button after the div content collapsed and give the div text overflow:hidden; not the container
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;
.collapsedmax-height:65px;max-width:200px;overflow:hidden;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
place the button after the div content collapsed and give the div text overflow:hidden; not the container
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;
.collapsedmax-height:65px;max-width:200px;overflow:hidden;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;
.collapsedmax-height:65px;max-width:200px;overflow:hidden;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.containermax-width:800px;margin-bottom:20px;
.collapsedmax-height:65px;max-width:200px;overflow:hidden;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
answered Mar 28 at 8:57
godfathergodfather
7501 gold badge3 silver badges14 bronze badges
7501 gold badge3 silver badges14 bronze badges
add a comment |
add a comment |
0
css way
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
position:absolute;
bottom:0px;
right:0px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>Is this what you want?
HTML BLOCK WAY
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
.container divmax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsed divmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
i am trying to avoid absolute and relative positions since it doesn't work properly if you have more elements
– erutuf
Mar 28 at 2:35
add a comment |
0
css way
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
position:absolute;
bottom:0px;
right:0px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>Is this what you want?
HTML BLOCK WAY
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
.container divmax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsed divmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
i am trying to avoid absolute and relative positions since it doesn't work properly if you have more elements
– erutuf
Mar 28 at 2:35
add a comment |
0
0
0
css way
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
position:absolute;
bottom:0px;
right:0px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>Is this what you want?
HTML BLOCK WAY
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
.container divmax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsed divmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
css way
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
position:absolute;
bottom:0px;
right:0px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>Is this what you want?
HTML BLOCK WAY
$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
.container divmax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsed divmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
position:absolute;
bottom:0px;
right:0px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
position:absolute;
bottom:0px;
right:0px;
.containermax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsedmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<button class="collapsible">More</button>
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div></div>$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
.container divmax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsed divmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>$('button, .smallx').click(function()
let box = $(this).closest('.container').find('.content');
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
);.collapsible
border: none;
width: 60px;
.content
position:relative;
button
.container divmax-width:800px;margin-bottom:20px;overflow:hidden;
.collapsed divmax-height:65px;max-width:200px;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="content collapsed">
<div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
</div> </div><button class="collapsible">More</button></div>answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
answered Mar 28 at 2:05
Munkhdelger TumenbayarMunkhdelger Tumenbayar
1,0878 silver badges20 bronze badges
1,0878 silver badges20 bronze badges
i am trying to avoid absolute and relative positions since it doesn't work properly if you have more elements
– erutuf
Mar 28 at 2:35
add a comment |
i am trying to avoid absolute and relative positions since it doesn't work properly if you have more elements
– erutuf
Mar 28 at 2:35
i am trying to avoid absolute and relative positions since it doesn't work properly if you have more elements
– erutuf
Mar 28 at 2:35
i am trying to avoid absolute and relative positions since it doesn't work properly if you have more elements
– erutuf
Mar 28 at 2:35
add a comment |
0
You can replace this
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
for
box.classList.toggle('collapsed')
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
that is not what he ask
– Munkhdelger Tumenbayar
Mar 28 at 2:09
add a comment |
0
You can replace this
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
for
box.classList.toggle('collapsed')
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
that is not what he ask
– Munkhdelger Tumenbayar
Mar 28 at 2:09
add a comment |
0
0
0
You can replace this
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
for
box.classList.toggle('collapsed')
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
You can replace this
if ( box.hasClass('collapsed') )
box.removeClass('collapsed');
else
box.addClass('collapsed');
for
box.classList.toggle('collapsed')
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
answered Mar 28 at 2:09
ariel diazariel diaz
12 bronze badges
12 bronze badges
that is not what he ask
– Munkhdelger Tumenbayar
Mar 28 at 2:09
add a comment |
that is not what he ask
– Munkhdelger Tumenbayar
Mar 28 at 2:09
that is not what he ask
– Munkhdelger Tumenbayar
Mar 28 at 2:09
that is not what he ask
– Munkhdelger Tumenbayar
Mar 28 at 2:09
add a comment |
0
If I understand correctly you want the button to sit right under the box/container that it will be toggling the visibility for. You should be able to do that using just css. Something like
<div class="container">
<div class="content collapsed">
<div class="text">Mauris dui mio</div>
<button class="collapsible">More</button>
</div>
</div>
moved the button under the content and added a class to the div
.content
display: flex;
flex-direction: column;
align-items: start;
.collapsible
border: none;
width: 60px;
plus the rest of your styles. Then you can have the click function on the button and have the div with .text change height with some logic to check the current height. Also using position absolute could do this as well with something like
.content
position: relative;
.collapsible
position: absolute;
left: 0;
bottom: 100;
I believe its bottom 100. Either that or bottom 0
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
add a comment |
0
If I understand correctly you want the button to sit right under the box/container that it will be toggling the visibility for. You should be able to do that using just css. Something like
<div class="container">
<div class="content collapsed">
<div class="text">Mauris dui mio</div>
<button class="collapsible">More</button>
</div>
</div>
moved the button under the content and added a class to the div
.content
display: flex;
flex-direction: column;
align-items: start;
.collapsible
border: none;
width: 60px;
plus the rest of your styles. Then you can have the click function on the button and have the div with .text change height with some logic to check the current height. Also using position absolute could do this as well with something like
.content
position: relative;
.collapsible
position: absolute;
left: 0;
bottom: 100;
I believe its bottom 100. Either that or bottom 0
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
add a comment |
0
0
0
If I understand correctly you want the button to sit right under the box/container that it will be toggling the visibility for. You should be able to do that using just css. Something like
<div class="container">
<div class="content collapsed">
<div class="text">Mauris dui mio</div>
<button class="collapsible">More</button>
</div>
</div>
moved the button under the content and added a class to the div
.content
display: flex;
flex-direction: column;
align-items: start;
.collapsible
border: none;
width: 60px;
plus the rest of your styles. Then you can have the click function on the button and have the div with .text change height with some logic to check the current height. Also using position absolute could do this as well with something like
.content
position: relative;
.collapsible
position: absolute;
left: 0;
bottom: 100;
I believe its bottom 100. Either that or bottom 0
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
If I understand correctly you want the button to sit right under the box/container that it will be toggling the visibility for. You should be able to do that using just css. Something like
<div class="container">
<div class="content collapsed">
<div class="text">Mauris dui mio</div>
<button class="collapsible">More</button>
</div>
</div>
moved the button under the content and added a class to the div
.content
display: flex;
flex-direction: column;
align-items: start;
.collapsible
border: none;
width: 60px;
plus the rest of your styles. Then you can have the click function on the button and have the div with .text change height with some logic to check the current height. Also using position absolute could do this as well with something like
.content
position: relative;
.collapsible
position: absolute;
left: 0;
bottom: 100;
I believe its bottom 100. Either that or bottom 0
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
answered Mar 28 at 2:10
Michael CaccianoMichael Cacciano
2441 silver badge5 bronze badges
2441 silver badge5 bronze badges
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55389018%2fpositioning-a-js-button-under-the-content-it-affects%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
So what is the question? Note you can replace the
if()withbox.toggleClass('collapsed')– charlietfl
Mar 28 at 1:52
How to put the button underneath it all, so it is not on top
– erutuf
Mar 28 at 1:53
You mean move it with jQuery?
– charlietfl
Mar 28 at 1:53
i want it to be permanently, by default, at the bottom of the container div
– erutuf
Mar 28 at 1:56
What's wrong with simply moving
<button />under your<div />?– Dimitri Kopriwa
Mar 28 at 2:04