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?

Solution 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/

Solution 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.

Solution 3

Try this

#content {
    display: none;
}

or

#content {
    visibility: hidden;
}

Comments

[Aditya Jain]

why don't you just use display:none for #content?

[vusan]

I want to animate through the content with view more and view less

[Marc Audet]

Are you trying to build a toggle switch to show/hide the content?

[vusan]

@MarcAudet see my update, I want to toggle by clicking view_more.

[rpasianotto]

Can you link an example?

[vusan]

Thank you for your effort but that don't solve my problem. See edit on my post.

[vusan]

Right now it works fine. But if the element have its background-color, the arrow looks inside the element.