stackoom
  简体   繁体   中英

Making a circular div expand into its parent on click and reveal content

 原文  2021-05-12 16:28:04  7   2    javascript/ html/ jquery/ css

Question

I want to create a circular div which expands to full width of its parent div and reveal the content. At least this is how I want it to be experienced by the user. I read the similar topics created but either they did not satisfy my need or I just could not implement them well. Here is a sketch of what I want it to look like.

Sketch

And here is what i have done so far. 

 function revealDetail(detail_no) { var i, x; x = document.getElementsByClassName("home-insurance"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(detail_no).style.display = "block"; }
 .hero-slider { position: relative; margin-bottom: 50px; }.hero-slider.slides { list-style: none; *zoom: 1; }.hero-slider.slides:after { content: " "; clear: both; display: block; overflow: hidden; height: 0; }.hero-slider.slides li { min-height: 460px; float: left; margin-right: -100%; width: 100%; background-size: cover; background-position: center center; }.hero-slider.slide-content { border-radius: 3px; background-color: white; width: 25%; padding: 30px; margin-top: 50px; margin-bottom: 30px; } @media screen and (max-width: 990px) {.hero-slider.slide-content { width: 50%; } } @media screen and (max-width: 480px) {.hero-slider.slide-content { width: 100%; } }.hero-slider.slide-content.slide-title { font-size: 35px; font-size: 2.1875em; font-weight: 300; margin-bottom: 30px; }.hero-slider.slide-content.slide-title strong { color: #0f75bd; display: block; font-weight: 300; }.hero-slider.slide-content p { line-height: 2; margin-bottom: 50px; }.hero-slider.flex-control-nav { list-style: none; position: absolute; bottom: -50px; width: 100%; text-align: center; }.hero-slider.flex-control-nav li { display: inline-block; margin: 0 5px; }.hero-slider.flex-control-nav li a { display: block; width: 15px; height: 15px; background-color: #c6c7c7; border-radius: 50%; overflow: hidden; text-indent: -99999px; cursor: pointer; }.hero-slider.flex-control-nav li a.flex-active { background-color: #0f75bd; }.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; *zoom: 1; }.container:after { content: " "; clear: both; display: block; overflow: hidden; height: 0; } @media (min-width: 768px) {.container { width: 750px; } } @media (min-width: 992px) {.container { width: 970px; } } @media (min-width: 1200px) {.container { width: 1170px; } }.news-list { margin-top: 50px; }.vertical-horizontal-center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }.row { margin-left: -15px; margin-right: -15px; *zoom: 1; }.row:after { content: " "; clear: both; display: block; overflow: hidden; height: 0; }.home-insurance { jusitfy-content: center; align-items: center; cursor: pointer; }.home-insurance { transition: 0.5s ease; }.home-insurance:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); transition: 0.5s ease; }.h-insurance { jusitfy-content: center; align-items: center; cursor: pointer; background-color: #082336; border-style: solid; border-radius: 50%; border-color: #082336; }.raise { display: inline-block; padding-top: 15px; vertical-align: top; text-align: center; width: 100%; }.raise i { font-size: 6vw; color: #fff; }.raise span { color: #fff; margin-top: 15px; }.text-center { text-align: center; }
 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="hero hero-slider"> <ul class="slides"> <li> <div class="container news-list vertical-horizontal-center" id="insurance-container"> <div class="col" style="background-color:black;display:none;height:100vh;" id="d0"></div> <div class="col" style="background-color:black;display:none;height:100vh;" id="d1"></div> <div class="col" style="background-color:black;display:none;height:100vh;" id="d2"></div> <div class="col" style="background-color:black;display:none;height:100vh;" id="d3"></div> <div class="col" style="background-color:black;display:none;height:100vh;" id="d4"></div> <div class="row"> <div class="col smth home-insurance"> <div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d0')"> <i class="icon-credit-card-hand text-center"></i> </div> <span>Content0<span> </div> <div class="col smth home-insurance"> <div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d1')"> <i class="icon-credit-card-hand text-center"></i> </div> <span>Content1<span> </div> <div class="col smth home-insurance"> <div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d2')"> <i class="icon-credit-card-hand text-center"></i> </div> <span>Content2<span> </div> <div class="col smth home-insurance"> <div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d3')"> <i class="icon-credit-card-hand text-center"></i> </div> <span>Content3<span> </div> <div class="col smth home-insurance"> <div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d4')"> <i class="icon-credit-card-hand text-center"></i> </div> <span>Content4<span> </div> <div class="col-12" id="d00" style="display:none;height:75vh;background-color:black"> <span style="color:#fff;">Kapat</span> </div> </div> </div> </li> </ul> </div> <.-- .hero-slider --> </body>

https://jsfiddle.net/Okstrok/hsckz8nf/29/

2 answers

solution1
 0  2021-05-12 17:14:20

  1. You may first try to remove the padding from your ul element: 

 .hero-slider.slides { padding: 0; }

  1. Also try to give to the inner div that in the li element: 

 .container { padding:0; max-width: inherit; }

solution2
 0  2021-05-12 18:58:24

I have managed to kind of achieve the animation using jquery animate. I have added a attribute dnumber to the element identified by class h-insurance and removed 'onclick()' function

$('.h-insurance').on('click', function() {
  let dnumber = '#' + $(this).attr('dnumber');
  // hide all home-insurance div tags
  $('.home-insurance').hide();
  // show only the home-insurance div (circle) on which animation is required
  $(this).closest('.home-insurance').show();
  // hide caption of the circle
  $(this).closest('.home-insurance').find('span').hide();

  // animate the circle with time of 1000ms
  $(this).animate({
    height: '100vh',
    width: '100%'
  }, 1000);

  // hide the circle and show the display block after 1000ms
  // this code executes after the circle animation
  setTimeout(function() {
    $('.home-insurance').hide();
    $(dnumber).show(1);
  }, 1000);

});

Check the jsfiddle https://jsfiddle.net/g73npm21/16/

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Is it possible to have this div expand as its content expands? Click to reveal div with Javascript Click an Image to Reveal Content Reveal Divs Content On Click Clearfix not making div's height expand to fit content Click to reveal div using Javascript click a button to delete itself and its parent div How to reveal hidden div on click expanding a div to reveal overflow on click Click to reveal more content - 2 columns
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM