top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to create Collapsible boxes with HTML 5?

+1 vote
348 views

Any javascript sample and PHP sample would be helpful?

posted May 19, 2015 by anonymous

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

tag allows us to create collapsible boxes in html5

The tag is supported in Chrome 31 and greater, Opera 27 and greater and Safari 7 or greater. The Android’s built-in browser supports it as well. IE and Firefox does not have a released version with support for the tag at this moment.

<!DOCTYPE html>
<html>
<head lang="en">
    <style>
        .col-lg-4{
            float: left;
            max-width: 33.33%;
        }
        .text-center {
            text-align: center;
        }
        details {
            background-color: chartreuse;
            padding: 5px;
            border-radius: 6px;
            border: 3px groove forestgreen;
            margin: 5px;
        }
    </style>
</head>
<body>
<div class="col-lg-4 text-center">
<details>
    <summary>Our Products List</summary>
    <ol>
        <li>Carbon</li>
        <li>Oxygen</li>
        <li>Nitrogen</li>
        <li>Silver</li>
        <li>Iron</li>
    </ol>
</details>
    </div>
<div class="col-lg-4 text-center">
    <details>
        <ol>
            <li>Carbon</li>
            <li>Oxygen</li>
            <li>Nitrogen</li>
            <li>Silver</li>
            <li>Iron</li>
        </ol>
    </details>
</div>

<div class="col-lg-4 text-center">
    <details open>
        <ol>
            <li>Carbon</li>
            <li>Oxygen</li>
            <li>Nitrogen</li>
            <li>Silver</li>
            <li>Iron</li>
        </ol>
    </details>
</div>
</body>
answer May 19, 2015 by Salil Agrawal
Similar Questions
+1 vote
Html javascript code for screen capture?

I want the javascript API which could capture the screen of the client. Does anyone knows about it?

+3 votes
What is optimal way to communicate with the web server while fetching the images, using javascript?

I went through this Discussion:

http://stackoverflow.com/questions/7087036/fetching-images-from-server-while-drawing-the-cell

I have a web server server-1.example.com. There is a JSON-Server running on another server server-2.example.com. What I have to achieve is to fetch a list of URLs (in form of JSON response) from server-2 and loop through the urls and fetch them from the server-1. In the meantime i have to animate these images on the browser by Fading the images one after the another.

The algorithm is something like this:-

START:
   FETCH the URLs from server-1 and store them in a cache C
   Loop until C.length
      Fetch first K images by forking a thread.
      animate k images
 END

How can I optimize K? Is my approach right?

...