I have a window that can be opened by clicking a button using javascript. The window cannot be closed by clicking on the inside of the window, and the window can only be closed by clicking on the outside of the window. At present, I always grab e.target.className to judge whether the clicked element should close the window, but if there are hundreds of elements in a window, this method does not seem to be a good way. I would like to ask if there is a formal What's a good way to handle this need?
$('.click').on('click',function(e){
$('.dialog').toggle()
$(document).on('click',function(e){
if(e.target.className == 'confirm' || e.target.className == 'item' || e.target.className == 'text' || e.target.className == 'dialog_wrap' || e.target.className == 'dialog' || e.target.className == 'head' || e.target.className == 'title'){
$('.dialog').css('display','inline-block');
}
})
})
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
Find whether the click was inside the .dialog with .closest. If it returns a .dialog element, the click was inside, so do nothing; otherwise, the click was outside or on the button, so you can close the dialog.
Also, you almost certainly don't want to add another click listener to the document every time .click is clicked; better to only add the listener once.
const dialog = $('.dialog');
$('.click').on('click', function(e) {
if (!e.target.closest('.dialog')) {
dialog.toggle();
}
e.stopPropagation();
});
$(document).on('click', function(e) {
dialog.hide();
});
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
You can assign a body id when the click starts, and you can close the form when you click anywhere on the body.
Related
I need to show not more than 3 li elements in a ul that can have N li elements. If the ul increase by more than 3 elements, I want to put a scroll.
I seacrhed in Google without an easy solution.
It works fine with this code, but I want to make it fixed to the amount of elements.
#ul_notas_lesion{
max-height: 500px;
overflow-y: scroll;
}
Do I need something with Javascript?
This is my code:
<div class="x_content">
<br />
<ul class="list-unstyled timeline">
<li>
<div class="block">
<div class="tags">
<a href="" class="tag">
<span>Entertainment</span>
</a>
</div>
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read More</a>
</p>
</div>
</div>
</li>
<li>
<div class="block">
<div class="tags">
<a href="" class="tag">
<span>Entertainment</span>
</a>
</div>
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read More</a>
</p>
</div>
</div>
</li>
<li>
<div class="block">
<div class="tags">
<a href="" class="tag">
<span>Entertainment</span>
</a>
</div>
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read More</a>
</p>
</div>
</div>
</li>
</ul>
<div class="row justify-content-md-center">
<div class="col-12 col-lg-6">
<button type="button" class="btn btn-outline-primary mt-3 btn-gray btn-block btn-gray" data-toggle="modal" data-target="#modal_Photo_Upload">Agregar Nota</button>
</div>
</div>
</div>
Use JS to do it dynamically
var list = document.querySelector(".list");
var li = document.querySelectorAll(".list li:nth-child(-n+3)");
var height = 0;
li.forEach((x)=> {
height += x.offsetHeight;
});
list.style.maxHeight = height + "px";
div {
height: 80px;
}
.list{
overflow-y:auto;
}
<ul class="list">
<li>
<div>bla bla</div>
</li>
<li>
<div>second</div>
</li>
<li>
<div> third</div>
</li>
<li>
<div>bla bla</div>
</li>
</ul>
Do i need something in Javascript?
No, you don't. At least not for a <ul> with regular height <li> elements.
Regular Height <li> elements
For a <ul> with regular height <li> elements, it will suffice to use:
an explicit height for <li>
an explicit max-height for <ul>
overflow-y: auto on <ul>
Working Example:
ul {
float: left;
margin-right: 12px;
padding: 0;
max-height: calc(38px * 3);
border: 1px solid rgb(255, 0, 0);
border-right: 2px solid rgb(255, 0, 0);
overflow-x: hidden;
overflow-y: auto;
}
li {
width: 90px;
height: 24px;
line-height: 24px;
margin: 0;
padding: 6px;
border: 1px solid rgb(255, 0, 0);
}
<ul>
<li>Item One</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
Irregular Height <li> elements
For a <ul> with irregular height <li> elements, you can count the elements with javascript and, if there are more than three, you can:
calculate the height of the first three <li> elements to derive a height value
apply that height value to a CSS Custom Property which represents the reference value for the max-height of the <ul>
Working Example:
const lists = document.getElementsByTagName('ul');
for (let list of lists) {
if (list.getElementsByTagName('li').length > 3) {
let listHeight = list.getElementsByTagName('li')[0].offsetHeight;
listHeight += list.getElementsByTagName('li')[1].offsetHeight;
listHeight += list.getElementsByTagName('li')[2].offsetHeight;
listHeight += 'px';
list.style.setProperty('--list-height', listHeight);
}
}
ul {
float: left;
margin: 0 12px 0 0;
padding: 0;
border: 1px solid rgb(255, 0, 0);
border-right: 2px solid rgb(255, 0, 0);
overflow-x: hidden;
overflow-y: auto;
--list-height: none;
max-height: var(--list-height);
}
li {
width: 90px;
line-height: 24px;
margin: 0;
padding: 6px;
border: 1px solid rgb(255, 0, 0);
list-style-type: none;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<ul>
<li>Lorem ipsum dolor</li>
<li>sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>adipiscing</li>
<li>elit, sed do</li>
</ul>
<ul>
<li>Lorem</li>
<li>ipsum dolor sit amet, consectetur adipiscing</li>
<li>elit, sed do eiusmod tempor incididunt</li>
<li>ut labore</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur</li>
<li>adipiscing elit, sed do</li>
<li>eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim</li>
</ul>
I have a list of content which is all viewable on desktop. On mobile, I have hidden some of the content and want to add a button, which on click, would show the hidden content.
I'm aware of how to hide and show div's on click, ie.
function showClass(id) {
var elem = document.getElementById(id);
var visible = getComputedStyle(elem).display == "block";
if (!visible) {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
But unsure on how to approach this for items that are in the same class that are hidden via nth-child?
Markup:
#media(max-width: 576px){
.wrapper:nth-of-type(n+4) {
display: none;
}
}
.showmore{
display: none;
}
#media(max-width: 576px){
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore" onclick="show">Show more</a>
</div>
Use the :not() pseudo-class to only hide the items when the .show-all class is not present on the container:
const container = document.querySelector('.container')
const showmore = document.querySelector('.showmore')
showmore.addEventListener('click', () =>
container.classList.toggle('show-all')
)
.showmore{
display: none;
}
#media(max-width: 576px){
.container:not(.show-all) .wrapper:nth-of-type(n+4) {
display: none;
}
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore">Show more</a>
</div>
I'd first change the placement of the "show more" link in the markup, in order to keep a more consistent order of reading.
With this approach you need to hide all the sibling elements of the link and the click event just removes the link itself, showing all the remaining content.
In this example the link is visible under 640px (open the demo in a full page) and I've also inserted a small fade effect over the text before the link (just remove the linear gradient if you are not interested)
document.querySelector('.showmore').addEventListener('click', function(ev) {
ev.preventDefault();
this.remove();
})
.showmore {
display: none;
margin-top: -5em;
}
.showmore::before {
content: "";
display: block;
height: 5em;
background: linear-gradient(to bottom, transparent, #fff);
}
#media all and (max-width:640px) {
.showmore {
display: block;
position: relative;
}
.showmore ~ * { display: none; }
}
<div class="container">
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<a class="showmore" href="#">Show more</a>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
</div>
I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
I have a li item, that has multiple things inside it. It will be a thumbnail and a short description, and an a tag inside the li that makes everything a link (thumbnail, white space and description) and inside the thumbnail will be a Facebook share icon that needs to click through to a share link.
But because it's all wrapped in an a tag, the a tag around the Facebook share icon kills the outer one...
Here's the html:
<li><a href="">
<div class="image-thumbail>
<div class="share-icons-thumb">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="events-text">
<h1>Event Name</h1>
<h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
<p>Lorem ipsum dolor sit amet, elit, sed diam
nonummy nibh euismod tincidunt ut...</p>
<br>
<h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
</div>
</a>
</li>
I've also mocked up a quick example in an image:
So I want the red circle to take you to the FB share link, and everything else to take you to the outer a tag link..........
Is this possible?
Any ideas/help would be great, thanks!
There is a bunch of odd nesting in your example that will give you problems. I wasn't able to even get the main a element working. I would recommend adding an action button instead of having the entire "card" clickable. However, you could use JavaScript to handle the card click. This might help.
HTML:
<div class="card">
<div class="image-thumbnail">
<div class="share-icons-thumb">
<a class="link-fb" href="http://example.com"><i class="fa fa-facebook">f</i></a>
<a class="link-twitter" href="http://example.com"><i class="fa fa-twitter">t</i></a>
</div>
</div>
<div class="events-text">
<h1>Event Name</h1>
<h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
<p>Lorem ipsum dolor sit amet, elit, sed diam
nonummy nibh euismod tincidunt ut...</p>
<br />
<h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
</div>
</div>
CSS:
.image-thumbnail {
background: aqua;
width: 120px;
height: 80px;
position: relative;
}
.card {
font-size: smaller;
width: 200px;
cursor: pointer;
}
.share-icons-thumb {
position: absolute;
bottom: 5px;
right: 5px;
z-index: 2;
}
.share-icons-thumb a {
color: white;
background: blue;
padding: 1px 5px;
margin: 0 2px;
}
JS:
$(function() {
$('.card').on('click', function() {
window.location = 'http://google.com';
});
});
http://jsfiddle.net/a0fncyvs/
The script in the fiddle doesn't allow window.location calls, and I added click handlers for the FB and Twitter links just for show and so you wouldn't actually be redirected here.
I hope that helps.
The solution that I have used in the past is to bring the inner <a> element forward in the stack order using a higher z-index than the outer <a> tag, eg. z-index: 2 This will make the inner tag selectable. For example add the following to your CSS and your original HTML will work as you expect.
.share-icons-thumb a {
z-index: 2;
}
<li><a href="">
<div class="image-thumbail">
<div class="share-icons-thumb">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="events-text">
<h1>Event Name</h1>
<h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
<p>Lorem ipsum dolor sit amet, elit, sed diam
nonummy nibh euismod tincidunt ut...</p>
<br>
<h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
</div>
</a>
</li>
I have a simple accordion. What i am trying to do is that when an item within the content is clicked (How to reach us) for example, the hidden subsequent text is expanded. Once expanded, the new height of the content DIV is calculated. This newly calculated content DIV height is then assigned to the height of .wrapper. The red wrapper should then surround the entire box.
See fiddle: http://jsfiddle.net/oampz/jLQf4/1/
HTML:
<div class="wrapper">
<ul class="panel">
<li>
<div class="heading"> <a>Menu 1</a>
</div>
<div class="content">
<ul>
<h2>Top Ten Questions</h2>
<li>
How to reach us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
How to email us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
Contact Number
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.heading {
color: white;
font-weight: bold;
padding: 15px 0 15px 20px;
background: grey;
}
.content {
background: #99CCFF;
position: absolute;
}
.hide {
display: none;
}
.wrapper {
background: #FFD1E0;
position: relative;
}
jQuery:
$(".content ul li a").click(function () {
var $this = $(this);
$this.next(".content ul li a").show(400);
$this.parent().siblings().children().next().hide();
return false;
});
UPDATE *******************************
After the .onClick, would something like:
$(".wrappper").css({'height':($(".content").height()+'px')});
Work?
UPDATE *******************************
Updated fiddle: http://jsfiddle.net/oampz/jLQf4/9/
If I understand your issue correctly, then this may help:
Demo Fiddle
Your content div doesn't have a specified width, so it's automatically wrapping whatever is inside of it, when you show your text it extends out further than it was initially.
EDIT - I think that there may be an easier way to go about what you're trying to accomplish. Instead of using JS to dynamically update the .wrapper I think it would be easier to remove the position: absolute from .content. Some padding seemed to make it look the same.
CSS:
.content {
width: 280px;
background: #99CCFF;
padding: 10px 0;
//position:absolute;
}