overflow hidden below not top in css

Question

overflow-y:hidden will hide the view both upper part and lower part. Can we just show upper part but not lower part. Now I like something like this overflow-y-top:visible; overflow-y-bottom:hidden;
Similarly overflow-x-left:visible;overflow-x-right:hidden
So is there something we can do in css?

Specific problem mine:

HTML:

<div id="main">    <div id="arrow">▲</div>    <div id="content">id="toggle_view">view more</div>    <div id="content1"> this is any thext</div>    <div id="content2"> this is any thext</div>    <div id="content3"> this is any thext</div>    <div id="content4"> this is any thext</div> </div> 

Css:

#main {overflow-y:hidden;height:100px;position:relative} #arrow {position:absolute;top:-30px;} #toggle_view{position:absolute;right:0;bottom:0;} 

Now I want to make the content hidden not the arrow. So Is there some technique to make just the below portion of div hidden not top?

Answer 1

You could add padding to the top of the element for however much you want displayed, This could then change to however much you need using javascript. If I understand correctly though, what you're looking for is that the arrow/viewmore is always displayed. so adding a padding-top: 20px; or whatever measurement unit you like should work

I added some simple javascript here just to make it work. You probably want animations and all that...

See this jsfiddle: http://jsfiddle.net/KPbLY/85/

To have the background not go into the padding (as mentioned in the comments) use another nested div such as:

http://jsfiddle.net/KPbLY/87/

Answer 2

Let's look at the HTML code first. You want:

<div id="arrow">▲ (view less)</div> <div id="main">    <div id="content1">text from #content1</div>    <div id="content2">text from #content2</div>    <div id="content3">text from #content3</div>    <div id="content4">text from #content4</div> </div> <div id="toggle_view">view more</div> 

Then for the CSS, you want:

#main {overflow-y:hidden;height:100px;position:relative} #arrow {cursor: pointer;} #toggle_view{ cursor: pointer;} .inactive { color: gray; } 

It's really hard to tell you can click something if there's no cursor:pointer. Also, we want to indicate to the users when a button is inactive (ex. it's useless to click "view more" if you're already viewing every

All righty, let's get to the JavaScript. You mentioned you're using a library, but not which one, so I'll just assume jQuery. First, we need to set our variables:

var heightOfMain = $('#main').height(); var heightOfContent1 = $('#content1').height(); var differenceInHeight = heightOfMain - heightOfContent1; 

Then, when clicking on #arrow, we want to change the height of #main to remove #content2, #content3, and #content4, leaving only #content1 behind (basically, we want to "remove" a height equal to differenceInHeight). We also want to then inactivate #arrow, since there's no point in saying "view less" if you're already viewing less. Finally, we want to make sure that "view more" is active (since we'll be toggling that later).

$('#arrow').click(function() {      $('#main').animate({         height: heightOfContent1      });        $(this).addClass('inactive');      $('#toggle_view').removeClass('inactive'); }); 

Finally, we want to enable #toggle_view. When clicking it, we want to re-add the height that we took off (differenceInHeight). Then, since we have everything already viewed, we can inactivate "view more". Finally, we need to activate "view less" again.

$('#toggle_view').click(function() {      //you want to remove contents 2 through 4, which have a combined height     //of differenceInHeight     $('#main').animate({         height: differenceInHeight });           $(this).hide();         $('#arrow').show();  }); 

For everything put together, see this jsFiddle.