Simulate an accordion

by Krishna Gopinath

HTML

<div class="container">
    <div class="header"><span>Mahathma Gandhi</span>
 <span>2 October 1869 – 30 January 1948</span>

    </div>
    <div class="content">Mohandas Karamchand Gandhi (pronounced [ˈmoːɦənd̪aːs ˈkərəmtʃənd̪ ˈɡaːnd̪ʱi] ( listen); 2 October 1869 – 30 January 1948), commonly known as Mahatma Gandhi or Bapu (Father of Nation), was the preeminent leader of Indian nationalism in British-ruled India. Employing non-violent civil disobedience, Gandhi led India to independence and inspired movements for non-violence, civil rights and freedom across the world.[2][3]</div>
</div>
<div class="container">
    <div class="header"><span>Jawaharlal Nehru</span><span>14 November 1889 – 27 May 1964</span>

    </div>
    <div class="content">Jawaharlal Nehru (Hindi: जवाहरलाल नेहरू) (Hindustani: [ˈdʒəʋaːɦərˈlaːl ˈneːɦru] ( listen); 14 November 1889 – 27 May 1964) was the first Prime Minister of India and a central figure in Indian politics for much of the 20th century. He emerged as the paramount leader of the Indian Independence Movement under the tutelage of Mahatma Gandhi and ruled India from its establishment as an independent nation in 1947 until his death in office in 1964.[5] Nehru is considered to be the architect of the modern Indian nation-state; a sovereign, socialist, secular, and democratic republic.[6] He was the father of Indira Gandhi and the maternal grandfather of Rajiv Gandhi, who were to later serve as the third and sixth Prime Ministers of India, respectively.</div>
</div>
<div class="container">
    <div class="header"><span>Subhash Chandra Bose</span><span>23 January 1897 – unknown</span>

    </div>
    <div class="content">Subhas Chandra Bose ( listen (help·info); 23 January 1897 – unknown) also known as Netaji (Bengali/Oriya/Hindi): “Respected Leader”), was one of the most prominent Indian nationalist leaders who attempted to gain India's independence from British rule by force during the waning years of World War II with the help of the...

CSS

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .header> span:first-child + span {
    float:right;
    font-style: italic;
}
.container .content {
    display: none;
    padding : 5px;
}

JavaScript

$(".header").click(function () {
    //getting the next element
    $content = $(this).next();
    //checking if its already visible
    if (!($content.is(":visible"))) {
        //no - its hidden - slide all the other open tabs to hide
        $(".content").slideUp("fast");
        //open up the content needed
        $content.slideToggle(500);
    }
});