The following link is one of my page which gives the details about the invited speakers.
http://iclaa2017.com/slide-show-test/#tab4
Everything is fine but when click the link(on speaker 1,2...), I am getting the toggle effect but, the speaker 1,2.. bar is going about the navigation bar. I understand that its happening because it acting as a page jump. But...
How to fix it? and How to fit the text in the drop down box?
I want the speaker 1,2... also should stay with the dropdown box.
The code I have used is the following:
.maindrop {
width: 49%;
}
.bar {
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
transition: .2s ease-out;
margin-bottom: .1cm;
}
.bar:hover {
background: gray;
}
.dropbox {
max-height: 0;
transition: .5s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 300px;
}<head>
</head>
<body>
<div style="width: 100%">
<div class="maindrop" style="float: left">
<div class="fold default"> <a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
<div style="width: 30%; float: left;"> <img src="http://sau.int/~ctgtc2016/images/RB_Bapat.jpeg" alt="" > </div>
<div style="width: 70%; float: left; text-align: justify;"> The main areas of research interest of Prof. Bapat are nonnegative matrices,
matrix inequalities, matrices in graph theory and generalized inverses.
He has published more than 100 research papers in these areas in reputed
national and international journals and guided three Ph.D. students. He
has written books on Linear Algebra, published by Hindustan Book Agency,
Springer and Cambridge University Press. He wrote a book on Mathematics
for the general reader, in Marathi, which won the state government award
for best literature in Science for 2004.
Prof. Bapat has been on the editorial boards of Linear and Multilinear
Algebra, Electronic Journal of Linear Algebra, India Journal of Pure and
Applied Mathematics and Kerala Mathematical Association Bulletin. He
has been elected Fellow of the Indian Academy of Sciences, Bangalore and
Indian National Science Academy, Delhi.
Prof. Bapat served as President of the Indian Mathematical Society during
its centennial year 2007-2008. For the past several years he has been
actively involved with the Mathematics Olympiad Program in India and
served as the National Coordinator for the Program. Prof. Bapat served as
Head, ISI Delhi Centre, during 2007-2011. He was awarded the J.C. Bose
fellowship in 2009. </div>
</div>
</div>
<div class="fold"> <a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
</div>
<div class="maindrop" style="float: right">
<div class="fold default"> <a class="bar" href="#tab5">Speaker 5</a>
<div class="dropbox" id='tab5'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab6"> Speaker 6</a>
<div class="dropbox" id='tab6'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab7"> Speaker 7</a>
<div class="dropbox" id='tab7'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab8"> Speaker 8</a>
<div class="dropbox" id='tab8'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
</div>
</div>
</body>