Home/ Questions/Q 8024407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T22:51:52+00:00

I would like to improve my user experience of the following code: HTML: <div

  • 0

I would like to improve my user experience of the following code:

HTML:

<div class="news-item">
    <div class="main-content">
        <div class="header"> Header 1 </div>
        <div class="content"> lorum ipsum </div>
        <div class="time"> time </div>
    </div>
</div>

<div class="news-item">
    <div class="main-content">
        <div class="header"> Header </div>
        <div class="content"> lorum ipsum </div>
        <div class="time"> time </div>
    </div>
</div>​

JavaScript:

jQuery(document).ready(function() {
    $(".header").click(function () {
      $(this).parent().toggleClass("expand");
    });
});​

CSS:

body {
    background-color: whitesmoke;
}

.header{
    font-size: 20px;
    padding-bottom: 20px;
    cursor:pointer;
}

.main-content {
    margin: 0 0 12px 70px;
    padding: 0;
    background: rgb(251, 251, 251);
    width: 80%;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    position:relative;
    margin-left: 20px;
    margin-top: 20px;
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 22px;
    height: 20px;
    overflow: hidden;
}

.expand {
    height: 200px;
}​

Demo: http://jsfiddle.net/9UJ7f/4/

As you may notice, when you click the Header, the box expands or collapses.

However, this only works when we click the Header, e.g. when we click the box’s border (in collapsed mode) nothing happens.

To eradicate “void-clicks”, I would like it to be like this:

A. In Collapsed Mode:
If you click anywhere on the box (.main-content class), the item will expand

B. In Expanded Mode:
If you click only the .Header class, the item contracts again.

What would be the best approach to do this ?

UPDATE:

OK, you were right. The CSS was a bit off.
I choose sandeep’s solution as it was the most minimalistic but best working solution.
But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some “void clicks” around the border).
You are awesome, guys. I’ll give you all a thumbs up.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give padding to heading DIV. Write like this:

        .main-content {
        margin: 0 0 12px 70px;
        padding: 0;
        background: rgb(251, 251, 251);
        width: 80%;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        position:relative;
        margin-left: 20px;
        margin-top: 20px;
        background-color: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding-bottom: 22px;
        height: 42px;
        overflow: hidden;
    }
    .header  ~ div{
        margin:22px;
    }

    .header{
        font-size: 20px;
        padding: 22px;
        cursor:pointer;
    }

    Check this http://jsfiddle.net/9UJ7f/14/

    • 0