smoothly appearing content

**chechu** · 05-06-2017, 10:12 AM

Hey all,
On my website I have added this code for content to show up in a box when clicked on it.
But I would like the content to appear smoothly. This is the code I have so far. What needs to be added, please?

Code:

<script type="text/javascript">
$(function () {
    $('.toggle').click(function (event) {
        event.preventDefault();
        var target = $(this).attr('href');
        $(target).toggleClass('hidden show');
    });
});
</script>

Thanks.

**coothead** · 05-06-2017, 11:48 AM

Hi there chechu,

may we see the relevant HTML?

It is also quite possible that this task can be done with just CSS.

coothead

**Tabassum** · 05-06-2017, 11:55 AM

The code is actually right.
But if you want smooth functioning, you need to use animation CSS and while you're using this, you should not use Toggle function. Instead of Toggle, you can use hide or show function.

**chechu** · 05-06-2017, 11:56 AM

Hey coothead,
This is what I added:

Code:

					<a href="#info" class="toggle"><img src="img/info.png"></a>
						<div id="info" class="hidden">
							<p class="infobox">content</p>
						</div>

Code:

.cover .hi .infobox {font-size:11px; background-color:#fff; border:1px solid #ccc; color:#444; line-height:1.8em; padding:10px; margin-top:5px; text-align:left;}

You can see in action here on the top left, and the button beneath the actor portfolio section: http://www.brunomazereel.com

I'm looking for something like this:

Code:

$('#toggle').on('click', function() {
  	img.fadeToggle();  
  });

But I have no idea how to make it work with the existing js.

**coothead** · 05-06-2017, 01:13 PM

Hi there chechu,

I cannot help you with jQuery as I only know "Vanilla JavaScript".

But I can show you the CSS version...

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.brunomazereel.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #333;  /* just used for display purposes!! */
 }
#cb {
    position: absolute;
    left: -999em;
 }
label[for="cb"] {
    cursor: pointer;
 }
#info {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 1s ease-in-out;
}
#info p {
    display: inline-block;
    padding: 0.625em;
    margin-top: 0.32em; 
    background-color: #fff; 
    border: 0.06em solid #ccc;
    line-height: 1.8em; 
    font-size: 0.7em; 
    color: #444; 
 }
#info p a {
    color: #444; 
 }
#cb:checked~#info  {
    height: 12em; /* this value is adjusable */
    opacity: 1;
 }
</style>

</head>
<body> 

<div class="hi">					
 <span>
  <a href="#overview" class="download-link hidden-xs"><img src="img/arrow_down.png"></a>
 </span>

 <input id="cb" type="checkbox">
 <label for="cb"><img src="img/info.png" alt=""></label>

 <div id="info">
  <p>
   » commercial Toerisme Limburg 2 (2017)<br>
   » commercial Engie France (2017)<br>
   » commercial Toerisme Limburg 1 (2017)<br>
   » commercial Volkswagen (2016)<br>
   » commercial CM (2016)<br>
   » commercial Volkswagen (2016)<br><br>
   <a href="#portfolio">» watch all commercials</a>
 </p>
<!-- .hi --></div>
<!-- .hi --></div>

</body>
</html>

coothead

**chechu** · 05-06-2017, 02:40 PM

That works perfectly, thanks!
I adjusted the top one, but now there is also another I was using here, below the actor portfolio.
How do I adjust that? Always happy to be able to replace js by css ...

**coothead** · 05-06-2017, 06:44 PM

Hi there chechu,

does this help...

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.brunomazereel.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="http://www.brunomazereel.com/css/main.css">
<link rel="stylesheet" href="http://www.brunomazereel.com/portfolio/css/cubeportfolio.css">

<style media="screen">
#cb1 {
    position: absolute;
    left: -999em;
 }
label[for="cb1"] {
    cursor: pointer;
 }
#updates {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 1s ease-in-out;
}
#cb1:checked~#updates  {
    height: 25em; /* this value is adjustable */
    opacity: 1;
 }
</style>

</head>
<body> 

<div id="loadMore-container" class="cbp-l-loadMore-button hidden-xs">

<hr class="spacer">

<input id="cb1" type="checkbox">
<label for="cb1" class="btn btn-primary btn-lg download-link">
 click here for updates chronologically, links to commercials<br>
 and downloads of all pictures and links to commercials
</label>

<hr class="spacer">

<div id="updates">
 <ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#chrono">updates chronologically in 2017</a></li>
  <li><a data-toggle="tab" href="#links">links to commercials and voice-overs</a></li>
  <li><a data-toggle="tab" href="#download">downloads pictures and links to commercials</a></li>
</ul>

<div class="tab-content">

<div id="chrono" class="tab-pane fade in active">
 <p style="text-align:left;">
  <a href="http://www.youtube.com/watch?v=jwB1J8FL76s?&rel=0&showinfo=0" data-title="Toerisme Limburg 2 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg2.jpg" title="commercial Limburg 2" class="imgupdates tool-tip" data-placement="top" alt="" ></a>
  <a href="portfolio/work/torfs1.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs1.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/torfs2.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs2.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/torfs3.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs3.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/torfs4.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs4.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/fintro.jpg" data-title="Fintro (2017)" class="cbp-lightbox"><img src="portfolio/work/fintro.jpg" title="Fintro" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="http://www.youtube.com/watch?v=va4vTwOLlrc?&rel=0&showinfo=0" data-title="Engie France (2017)" class="cbp-lightbox"><img src="portfolio/img/commercial_engieFR.jpg" title="commercial Engie FR" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/ams4.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams4.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/ams2.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams2.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/ams3.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams3.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="http://www.youtube.com/watch?v=9MKvqVTtzzc?&rel=0&showinfo=0" data-title="Toerisme Limburg 1 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg1.jpg" title="commercial Limburg 1" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/delhaize.jpg" data-title="Delhaize (2017)" class="cbp-lightbox"><img src="portfolio/work/delhaize.jpg" title="Delhaize" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/Zgeneration.jpg" data-title="Z-Generation (2017)" class="cbp-lightbox"><img src="portfolio/work/Zgeneration.jpg" title="Z-Generation" class="imgupdates tool-tip" data-placement="top" alt=""></a>
  <a href="portfolio/work/fme.jpg" data-title="Fresh Mushrooms Europe (2017)" class="cbp-lightbox"><img src="portfolio/work/fme.jpg" title="Fresh Mushrooms Europe" class="imgupdates tool-tip" data-placement="top" alt=""></a>
 </p>
<!-- #chrono --></div>

<div id="links" class="tab-pane fade">

<div class="row">

<div class="col-lg-6">
 <p style="text-align:left;margin-left:15px;">
  <br><a href="http://www.youtube.com/watch?v=jwB1J8FL76s" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 2 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=jwB1J8FL76s
  <br><a href="http://www.youtube.com/watch?v=va4vTwOLlrc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie FR (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=va4vTwOLlrc
  <br><a href="http://www.youtube.com/watch?v=9MKvqVTtzzc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 1 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=9MKvqVTtzzc
  <br><a href="http://www.youtube.com/watch?v=MAtwgOsycc0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 3 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MAtwgOsycc0
  <br><a href="http://www.youtube.com/watch?v=OFQgEAkZv8k" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="JBC (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=OFQgEAkZv8k
  <br><a href="http://www.youtube.com/watch?v=bVYHjVlXRgw" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie BE (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=bVYHjVlXRgw
  <br><a href="http://www.youtube.com/watch?v=gjElHVZ4f14" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 2 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=gjElHVZ4f14
  <br><a href="http://www.youtube.com/watch?v=ELFdbTwJkJE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 1 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=ELFdbTwJkJE
  <br><a href="http://www.youtube.com/watch?v=Sa0nGFmk7Ec" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bison (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Sa0nGFmk7Ec
  <br><a href="http://www.youtube.com/watch?v=nvENEbvSMW4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="CM (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=nvENEbvSMW4
 </p>
<!-- .col-lg-6 --></div>

<div class="col-lg-6">
 <p style="text-align:left;margin-left:15px;">
  <br><a href="http://www.youtube.com/watch?v=tuXjrcIGsWY" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Krëfel (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=tuXjrcIGsWY
  <br><a href="http://vimeo.com/133641061" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Skyline Europe (2016)" data-placement="top"></i> &nbsp;&nbsp; http://vimeo.com/133641061
  <br><a href="http://www.youtube.com/watch?v=MVqAA9_7gR4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Peugeot tutorial (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MVqAA9_7gR4
  <br><a href="http://www.youtube.com/watch?v=8MGYyB41lJ8" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="voice-over English (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=8MGYyB41lJ8
  <br><a href="http://www.youtube.com/watch?v=6uzW4hN_Yd0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Aoste voice-over Dutch (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=6uzW4hN_Yd0
  <br><a href="http://www.youtube.com/watch?v=RMVH-JfOacQ" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Roompot (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=RMVH-JfOacQ
  <br><a href="http://www.youtube.com/watch?v=fjtfIBUzNQA" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Tour Eiffel FR (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=fjtfIBUzNQA
  <br><a href="http://www.youtube.com/watch?v=rm8mHmxASAk" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bokrijk (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=rm8mHmxASAk
  <br><a href="http://www.youtube.com/watch?v=Ba3Y2Ov2NBE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Colruyt (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Ba3Y2Ov2NBE
  <br><a href="http://www.youtube.com/watch?v=KZQPkOE2PvI" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Dats24 (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=KZQPkOE2PvI
 </p>
<!-- .col-lg-6 --></div>

<!-- .row --></div>
<!-- #links --></div>

<div id="download" class="tab-pane fade">
 <form method="get" action="img/photos_BrunoMazereel.zip" style="float:left;margin-left:15px;">
  <button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all pictures (.zip)</button>
 </form>
 <form method="get" action="img/commercials_BrunoMazereel.zip" style="float:left;margin-left:15px;">
  <button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all links to commercials and voice-overs (.zip)</button>
 </form>
<!-- #download--></div>

<!-- .tab-content --></div>
<!-- #updates --></div>
<!-- #loadMore-container --></div>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.brunomazereel.com/js/vendor/bootstrap.js"></script>

</body>
</html>

Note:-

This...

Code:


<base href="http://www.brunomazereel.com/">

...and various instances of...

Code:


http://www.brunomazereel.com/

...were added for testing purposes only.

I have also corrected and validated the HTML.

Your page has numerous errors...

https://validator.w3.org/nu/?doc=htt...azereel.com%2F

...which need your attention

coothead

**chechu** · 05-06-2017, 11:42 PM

That's some really great stuff what you did there, thanks.
Just one issue: if you check the site on smaller devices than laptop, not the whole content of the tabs is shown (see below). I guess that's because here you set a fixed height:

Code:

#cb1:checked~#updates {height: 25em; opacity: 1;}

How to fix that so that the height will always be at least the height of the tab with the most content, please?

Click image for larger version.

Name: Knipsel.JPG
Views: 116
Size: 66.5 KB
ID: 6167

**coothead** · 05-07-2017, 09:43 AM

Hi there chechu,

Sorry about that, I forgot to make the code responsive.

Add these media queries...

Code:


@media screen and (max-width:75em){
#cb1:checked~#updates  {
    height: 40em;
  }
 }

@media screen and (max-width:62em){
#cb1:checked~#updates  {
    height: 50em;
  }
 }

...to your "theme.css" file.

coothead

**chechu** · 05-07-2017, 09:49 AM

Thanks for that.
But is it not possible not to work with fixed height? I don't mind if the content underneath moves according to the amount of content in the tabs.