Hide and Display Definition List Item using only Data Attribute CSS

Question

I am trying to hide and display the definition list content when the mouse was hovered using DATA ATTRIBUTE and CSS only if possible.

What I want to attain is when I hover my mouse on the <dt> it will show the <dd> content.

Check out my HTML codes:

<dl>
    <dt data-name="Open"> About Us</dt>
    <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best! </dd>
    <dt data-name="Open"> Profile</dt>
    <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd>
    <dt data-name="Open"> Landmarks</dt>
    <dd>You can check our landmark by checking google maps at Kansas City, Missouri! </dd>
    <dt data-name="Open">Testimonials</dt>
    <dd>This company is great! They have cool stuffs inside! The nurses are cute too! </dd>
    <dt data-name="Open"> Contact Us</dt>
    <dd>You can contact us here: <br/>
        634 Woodhaven Ct
        Clarksville, TN 37042-3918
    </dd>
</dl>

Here's the CSS:

dd {
    margin: 0;
    padding: 20px 0;
    font-size: 14px;
    background: #fbfbfb;
    padding: 10px 50px;
}

dt {
    cursor: pointer;
    font-size : 18px;
    line-height: 23px;
    background: #2ebb98;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid white;
    font-weight: 400;
    color: #fff;
    text-align: left;
    padding: 10px 14px;

}

dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }

dt[data="open"]{

}

Check out the JSFIDDLE LINK: http://jsfiddle.net/vphuypj4/

I only want to attain this using ONLY CSS and Data-attribute.

Answer 1

You need to hide the dd s by default, then use an attribute selector , along with :hover and the adjacent sibling selector . Note that the attribute value Open is case-sensitive.

dd {
    display:none;
}

dt[data-name="Open"]:hover + dd{
    display:block;

}

http://jsfiddle.net/vphuypj4/2/

Answer 2

 body { width: 330px; margin: 100px auto; text-align: center; font-family: 'Open Sans Light'; background: #555555; } dd { margin: 0; padding: 20px 0; font-size: 14px; background: #fbfbfb; padding: 10px 50px; } dt { cursor: pointer; font-size: 18px; line-height: 23px; background: #2ebb98; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; font-weight: 400; color: #fff; text-align: left; padding: 10px 14px; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } dd { height:0px; padding:0; transition: .5s linear; overflow:hidden; } dt[data-name=Open]:hover + dd { height:40px; padding:20px 0; } 

 <dl> <dt data-name="Open"> About Us</dt> <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best!</dd> <dt data-name="Open"> Profile</dt> <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd> <dt data-name="Open"> Landmarks</dt> <dd>You can check our landmark by checking google maps at Kansas City, Missouri!</dd> <dt data-name="Open">Testimonials</dt> <dd>This company is great! They have cool stuffs inside! The nurses are cute too!</dd> <dt data-name="Open"> Contact Us</dt> <dd>You can contact us here: <br/>634 Woodhaven Ct Clarksville, TN 37042-3918</dd> </dl> 

Answer 3

You could add @keyframes for slide down animation on :hover .

Updated Fiddle

 body { width: 330px; margin: 10px auto; text-align: center; font-family: 'Open Sans Light'; background: #555555; } dd { display: none; margin: 0; padding: 20px 0; font-size: 14px; background: #fbfbfb; padding: 10px 50px; } dt { cursor: pointer; font-size: 18px; line-height: 23px; background: #2ebb98; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; font-weight: 400; color: #fff; text-align: left; padding: 10px 14px; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } dt:hover + dd { display: block; -webkit-animation: slideDown 0.5s 1; animation: slideDown 0.5s 1; overflow: hidden; } @-webkit-keyframes slideDown { 0% { height: 0; } 100% { height: 50px; } } @keyframes slideDown { 0% { height: 0; } 100% { height: 50px; } } 

 <dl> <dt data-name="Open"> About Us</dt> <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best!</dd> <dt data-name="Open"> Profile</dt> <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd> <dt data-name="Open"> Landmarks</dt> <dd>You can check our landmark by checking google maps at Kansas City, Missouri!</dd> <dt data-name="Open">Testimonials</dt> <dd>This company is great! They have cool stuffs inside! The nurses are cute too!</dd> <dt data-name="Open"> Contact Us</dt> <dd>You can contact us here: <br/>634 Woodhaven Ct Clarksville, TN 37042-3918 </dd> </dl> 

Answer 4

For smooth animation , dont set the binary display property.

Instead, use a transition on max-height , triggered by the :hover state - also transitioning the padding adds a nice effect too.

The reason to use max-height instead of height is that when using height an absolute value needs to be set which all items will always transition to (all items forced to be the same height). Using max-height , by setting it to a value greater than the maximum required, items will animate to only the height they require (can be different heights)

The benefit over using keyframes is the reduced code, and the fact it animates on both mouseover and mouseout

 body { width: 330px; margin: 100px auto; text-align: center; font-family: 'Open Sans Light'; background: #555555; } dd { margin: 0; padding: 20px 0; font-size: 14px; background: #fbfbfb; padding: 10px 50px; } dt { cursor: pointer; font-size: 18px; line-height: 23px; background: #2ebb98; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; font-weight: 400; color: #fff; text-align: left; padding: 10px 14px; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } dd { max-height: 0; box-sizing: border-box; padding: 0; overflow: hidden; transition: all 200ms ease-in; } dt[data-name=Open]:hover + dd { max-height: 200px; /* <---can be anything, as long as it exceeds the height of the largest item */ padding: 20px 0; } 

 <dl> <dt data-name="Open"> About Us</dt> <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best!</dd> <dt data-name="Open"> Profile</dt> <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd> <dt data-name="Open"> Landmarks</dt> <dd>You can check our landmark by checking google maps at Kansas City, Missouri!</dd> <dt data-name="Open">Testimonials</dt> <dd>This company is great! They have cool stuffs inside! The nurses are cute too!</dd> <dt data-name="Open"> Contact Us</dt> <dd>You can contact us here: <br/>634 Woodhaven Ct Clarksville, TN 37042-3918 </dd> </dl>