Showing and hiding information with photosThree biographical profiles with photosShowing/hiding deletion...

Infinite dials to reset ever?

Are Captain Marvel's powers affected by Thanos' actions in Infinity War

Fantasy book from my childhood: female protagonist, Blood Ore or Blood Metal for taking attributes

Added a new user on Ubuntu, set password not working?

Find the Primitive Roots Mod 31

How does the math work for Perception checks?

Dealing with a rejection from a journal

Why is it that I can sometimes guess the next note?

The probability of Bus A arriving before Bus B

How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?

Freedom of speech and where it applies

Is this toilet slogan correct usage of the English language?

Removing files under particular conditions (number of files, file age)

Basic combinatorial probability problem

Creepy dinosaur pc game identification

Count the occurrence of each unique word in the file

Why electric field inside a cavity of a non conducting not zero

How should I respond when I lied about my education and the company finds out through background check?

Pre-mixing cryogenic fuels and using only one fuel tank

Multiplicative persistence

Does Doodling or Improvising on the Piano Have Any Benefits?

Redundant comparison & "if" before assignment

Yosemite Fire Rings - What to Expect?

What was this official D&D 3.5e Lovecraft-flavored rulebook?

Showing and hiding information with photos

Three biographical profiles with photosShowing/hiding deletion buttons in a grid viewShowing or hiding groups of three text fieldsHiding and showing DOM elements dynamicallySimpler way of showing, hiding & disabling elementsRefining/simplifying jquery for hiding and showing fieldsetsHiding element based on contentShowing and hiding text excerptsSlideshow scrolling photos horizontally using jQueryResponsive layout for showing/hiding 4 panels

I have been given an extremely loose design to follow: a page must show people's photos and name in a text overlay over the image, and when clicked a bio shows below.

Must Haves

Photo, text overlay with white background that you can still see part of the image. On click show the bio information, must have a connecting arrow to the image to show show who it relates to.

First row must have three images, all other rows there after must have four.

The working fiddle is at http://jsfiddle.net/SimonPrice/5kmfq7L3/122/

$(document).ready(function(){

    $(".imagebox").on('click', function(){



  var obj = $(this);

      var bio = $(obj).siblings().find('.bio');

      var dataTarget = $(obj).data("target")

      var parent= $("#" + dataTarget).parents('.bio-text')    

      var target = $("#" + dataTarget)

      var parentId = parent.id;

      console.log(parent.is(':visible'))

        if ( parent.is(':visible') && target.is(':visible')){

        $('.bio').hide('slow');

        $('.bio-text').hide('slow');     

        $('.bio-text-value').hide('slow');

        }

      else{

        $('.bio').hide();

        $('.bio-text').hide();     

        $('.bio-text-value').hide();



        console.log(parent)

        target.fadeIn('fast')

        bio.fadeIn('slow');

        target.fadeIn('slow');

        parent.fadeIn('slow')

      }

  })  

})

.bio {

     margin-left: 15px;

     background: #FFFFFF;

    /*border: 1px solid #CAD5E0;

    */

     border-radius: 8px;

     position: absolute;

     z-index: 9 

}

 .bio-text {

     margin-top:4px;

     width: 97%;

     background: #FFFFFF;

     border: 1px solid #CAD5E0;

     border-radius: 8px;

     min-height: 300px 

}

 .bio:after {

     content: '';

     display: block;

     position: absolute;

     top: -11px;

     width: 30px;

     height: 30px;

     background: #FFFFFF;

     border-right:1px solid #CAD5E0;

     border-top:1px solid #CAD5E0;

     -moz-transform:rotate(-45deg);

     -webkit-transform:rotate(-45deg);

}



 .first, .second, .third, .fourth, .bio-text, .bio-text-value{

     display: none;

}



 .imagebox {

     padding: 0px;

     position: relative;

     text-align: center;

     width: 100%;

}

 .imagebox img {

     opacity: 1;

     transition: 0.5s opacity;

     border-radius: 8px 

}

 .imagebox .imagebox-desc {

     background-color: #ffffff;

     bottom: 0px;

     color: #000000;

     font-size: 1.2em;

     left: 0px;

     padding: 10px 15px;

     position: absolute;

     transition: 0.5s padding;

     text-align: center;

     width: 100%;

     opacity: 0.5;

}

 .imagebox:hover img {

     opacity: 0.9;

}

 .imagebox:hover .imagebox-desc {

     padding-bottom: 10%;

     opacity: 0.9;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

   <div class="row">

      <div class="col-sm-4">

         <div class="imagebox" data-target="simon">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox"  data-target="vinnie">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox" data-target="stuart">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon">

                  <p>

                     Pickle Rick

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie">

                  <p>

                     batman

                  </p>

               </div>

               <div class="bio-text-value" id="stuart">

                  <p>

                     lego batman

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-sm-3">

         <div class="imagebox" data-target="simon-p">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox"  data-target="vinnie-l">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="stuart-w">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="david-h">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon-p">

                  <p>

                     Pickle Rick - 1

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie-l">

                  <p>

                     batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="stuart-w">

                  <p>

                     lego batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="david-h">

                  <p>

                     lego batman - 2

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

</div>

edited Mar 15 at 17:00

200_success

130k17155419

asked Mar 15 at 15:36

Simon Price

1416

add a comment |

I have been given an extremely loose design to follow: a page must show people's photos and name in a text overlay over the image, and when clicked a bio shows below.

Must Haves

Photo, text overlay with white background that you can still see part of the image. On click show the bio information, must have a connecting arrow to the image to show show who it relates to.

First row must have three images, all other rows there after must have four.

The working fiddle is at http://jsfiddle.net/SimonPrice/5kmfq7L3/122/

$(document).ready(function(){

    $(".imagebox").on('click', function(){



  var obj = $(this);

      var bio = $(obj).siblings().find('.bio');

      var dataTarget = $(obj).data("target")

      var parent= $("#" + dataTarget).parents('.bio-text')    

      var target = $("#" + dataTarget)

      var parentId = parent.id;

      console.log(parent.is(':visible'))

        if ( parent.is(':visible') && target.is(':visible')){

        $('.bio').hide('slow');

        $('.bio-text').hide('slow');     

        $('.bio-text-value').hide('slow');

        }

      else{

        $('.bio').hide();

        $('.bio-text').hide();     

        $('.bio-text-value').hide();



        console.log(parent)

        target.fadeIn('fast')

        bio.fadeIn('slow');

        target.fadeIn('slow');

        parent.fadeIn('slow')

      }

  })  

})

.bio {

     margin-left: 15px;

     background: #FFFFFF;

    /*border: 1px solid #CAD5E0;

    */

     border-radius: 8px;

     position: absolute;

     z-index: 9 

}

 .bio-text {

     margin-top:4px;

     width: 97%;

     background: #FFFFFF;

     border: 1px solid #CAD5E0;

     border-radius: 8px;

     min-height: 300px 

}

 .bio:after {

     content: '';

     display: block;

     position: absolute;

     top: -11px;

     width: 30px;

     height: 30px;

     background: #FFFFFF;

     border-right:1px solid #CAD5E0;

     border-top:1px solid #CAD5E0;

     -moz-transform:rotate(-45deg);

     -webkit-transform:rotate(-45deg);

}



 .first, .second, .third, .fourth, .bio-text, .bio-text-value{

     display: none;

}



 .imagebox {

     padding: 0px;

     position: relative;

     text-align: center;

     width: 100%;

}

 .imagebox img {

     opacity: 1;

     transition: 0.5s opacity;

     border-radius: 8px 

}

 .imagebox .imagebox-desc {

     background-color: #ffffff;

     bottom: 0px;

     color: #000000;

     font-size: 1.2em;

     left: 0px;

     padding: 10px 15px;

     position: absolute;

     transition: 0.5s padding;

     text-align: center;

     width: 100%;

     opacity: 0.5;

}

 .imagebox:hover img {

     opacity: 0.9;

}

 .imagebox:hover .imagebox-desc {

     padding-bottom: 10%;

     opacity: 0.9;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

   <div class="row">

      <div class="col-sm-4">

         <div class="imagebox" data-target="simon">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox"  data-target="vinnie">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox" data-target="stuart">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon">

                  <p>

                     Pickle Rick

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie">

                  <p>

                     batman

                  </p>

               </div>

               <div class="bio-text-value" id="stuart">

                  <p>

                     lego batman

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-sm-3">

         <div class="imagebox" data-target="simon-p">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox"  data-target="vinnie-l">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="stuart-w">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="david-h">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon-p">

                  <p>

                     Pickle Rick - 1

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie-l">

                  <p>

                     batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="stuart-w">

                  <p>

                     lego batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="david-h">

                  <p>

                     lego batman - 2

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

</div>

edited Mar 15 at 17:00

200_success

130k17155419

asked Mar 15 at 15:36

Simon Price

1416

add a comment |

I have been given an extremely loose design to follow: a page must show people's photos and name in a text overlay over the image, and when clicked a bio shows below.

Must Haves

Photo, text overlay with white background that you can still see part of the image. On click show the bio information, must have a connecting arrow to the image to show show who it relates to.

First row must have three images, all other rows there after must have four.

The working fiddle is at http://jsfiddle.net/SimonPrice/5kmfq7L3/122/

$(document).ready(function(){

    $(".imagebox").on('click', function(){



  var obj = $(this);

      var bio = $(obj).siblings().find('.bio');

      var dataTarget = $(obj).data("target")

      var parent= $("#" + dataTarget).parents('.bio-text')    

      var target = $("#" + dataTarget)

      var parentId = parent.id;

      console.log(parent.is(':visible'))

        if ( parent.is(':visible') && target.is(':visible')){

        $('.bio').hide('slow');

        $('.bio-text').hide('slow');     

        $('.bio-text-value').hide('slow');

        }

      else{

        $('.bio').hide();

        $('.bio-text').hide();     

        $('.bio-text-value').hide();



        console.log(parent)

        target.fadeIn('fast')

        bio.fadeIn('slow');

        target.fadeIn('slow');

        parent.fadeIn('slow')

      }

  })  

})

.bio {

     margin-left: 15px;

     background: #FFFFFF;

    /*border: 1px solid #CAD5E0;

    */

     border-radius: 8px;

     position: absolute;

     z-index: 9 

}

 .bio-text {

     margin-top:4px;

     width: 97%;

     background: #FFFFFF;

     border: 1px solid #CAD5E0;

     border-radius: 8px;

     min-height: 300px 

}

 .bio:after {

     content: '';

     display: block;

     position: absolute;

     top: -11px;

     width: 30px;

     height: 30px;

     background: #FFFFFF;

     border-right:1px solid #CAD5E0;

     border-top:1px solid #CAD5E0;

     -moz-transform:rotate(-45deg);

     -webkit-transform:rotate(-45deg);

}



 .first, .second, .third, .fourth, .bio-text, .bio-text-value{

     display: none;

}



 .imagebox {

     padding: 0px;

     position: relative;

     text-align: center;

     width: 100%;

}

 .imagebox img {

     opacity: 1;

     transition: 0.5s opacity;

     border-radius: 8px 

}

 .imagebox .imagebox-desc {

     background-color: #ffffff;

     bottom: 0px;

     color: #000000;

     font-size: 1.2em;

     left: 0px;

     padding: 10px 15px;

     position: absolute;

     transition: 0.5s padding;

     text-align: center;

     width: 100%;

     opacity: 0.5;

}

 .imagebox:hover img {

     opacity: 0.9;

}

 .imagebox:hover .imagebox-desc {

     padding-bottom: 10%;

     opacity: 0.9;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

   <div class="row">

      <div class="col-sm-4">

         <div class="imagebox" data-target="simon">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox"  data-target="vinnie">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox" data-target="stuart">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon">

                  <p>

                     Pickle Rick

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie">

                  <p>

                     batman

                  </p>

               </div>

               <div class="bio-text-value" id="stuart">

                  <p>

                     lego batman

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-sm-3">

         <div class="imagebox" data-target="simon-p">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox"  data-target="vinnie-l">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="stuart-w">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="david-h">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon-p">

                  <p>

                     Pickle Rick - 1

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie-l">

                  <p>

                     batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="stuart-w">

                  <p>

                     lego batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="david-h">

                  <p>

                     lego batman - 2

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

</div>

edited Mar 15 at 17:00

200_success

130k17155419

asked Mar 15 at 15:36

Simon Price

1416

I have been given an extremely loose design to follow: a page must show people's photos and name in a text overlay over the image, and when clicked a bio shows below.

Must Haves

Photo, text overlay with white background that you can still see part of the image. On click show the bio information, must have a connecting arrow to the image to show show who it relates to.

First row must have three images, all other rows there after must have four.

The working fiddle is at http://jsfiddle.net/SimonPrice/5kmfq7L3/122/

$(document).ready(function(){

    $(".imagebox").on('click', function(){



  var obj = $(this);

      var bio = $(obj).siblings().find('.bio');

      var dataTarget = $(obj).data("target")

      var parent= $("#" + dataTarget).parents('.bio-text')    

      var target = $("#" + dataTarget)

      var parentId = parent.id;

      console.log(parent.is(':visible'))

        if ( parent.is(':visible') && target.is(':visible')){

        $('.bio').hide('slow');

        $('.bio-text').hide('slow');     

        $('.bio-text-value').hide('slow');

        }

      else{

        $('.bio').hide();

        $('.bio-text').hide();     

        $('.bio-text-value').hide();



        console.log(parent)

        target.fadeIn('fast')

        bio.fadeIn('slow');

        target.fadeIn('slow');

        parent.fadeIn('slow')

      }

  })  

})

.bio {

     margin-left: 15px;

     background: #FFFFFF;

    /*border: 1px solid #CAD5E0;

    */

     border-radius: 8px;

     position: absolute;

     z-index: 9 

}

 .bio-text {

     margin-top:4px;

     width: 97%;

     background: #FFFFFF;

     border: 1px solid #CAD5E0;

     border-radius: 8px;

     min-height: 300px 

}

 .bio:after {

     content: '';

     display: block;

     position: absolute;

     top: -11px;

     width: 30px;

     height: 30px;

     background: #FFFFFF;

     border-right:1px solid #CAD5E0;

     border-top:1px solid #CAD5E0;

     -moz-transform:rotate(-45deg);

     -webkit-transform:rotate(-45deg);

}



 .first, .second, .third, .fourth, .bio-text, .bio-text-value{

     display: none;

}



 .imagebox {

     padding: 0px;

     position: relative;

     text-align: center;

     width: 100%;

}

 .imagebox img {

     opacity: 1;

     transition: 0.5s opacity;

     border-radius: 8px 

}

 .imagebox .imagebox-desc {

     background-color: #ffffff;

     bottom: 0px;

     color: #000000;

     font-size: 1.2em;

     left: 0px;

     padding: 10px 15px;

     position: absolute;

     transition: 0.5s padding;

     text-align: center;

     width: 100%;

     opacity: 0.5;

}

 .imagebox:hover img {

     opacity: 0.9;

}

 .imagebox:hover .imagebox-desc {

     padding-bottom: 10%;

     opacity: 0.9;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

   <div class="row">

      <div class="col-sm-4">

         <div class="imagebox" data-target="simon">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox"  data-target="vinnie">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox" data-target="stuart">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon">

                  <p>

                     Pickle Rick

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie">

                  <p>

                     batman

                  </p>

               </div>

               <div class="bio-text-value" id="stuart">

                  <p>

                     lego batman

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-sm-3">

         <div class="imagebox" data-target="simon-p">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox"  data-target="vinnie-l">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="stuart-w">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="david-h">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon-p">

                  <p>

                     Pickle Rick - 1

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie-l">

                  <p>

                     batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="stuart-w">

                  <p>

                     lego batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="david-h">

                  <p>

                     lego batman - 2

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

</div>

$(document).ready(function(){

    $(".imagebox").on('click', function(){



  var obj = $(this);

      var bio = $(obj).siblings().find('.bio');

      var dataTarget = $(obj).data("target")

      var parent= $("#" + dataTarget).parents('.bio-text')    

      var target = $("#" + dataTarget)

      var parentId = parent.id;

      console.log(parent.is(':visible'))

        if ( parent.is(':visible') && target.is(':visible')){

        $('.bio').hide('slow');

        $('.bio-text').hide('slow');     

        $('.bio-text-value').hide('slow');

        }

      else{

        $('.bio').hide();

        $('.bio-text').hide();     

        $('.bio-text-value').hide();



        console.log(parent)

        target.fadeIn('fast')

        bio.fadeIn('slow');

        target.fadeIn('slow');

        parent.fadeIn('slow')

      }

  })  

})

.bio {

     margin-left: 15px;

     background: #FFFFFF;

    /*border: 1px solid #CAD5E0;

    */

     border-radius: 8px;

     position: absolute;

     z-index: 9 

}

 .bio-text {

     margin-top:4px;

     width: 97%;

     background: #FFFFFF;

     border: 1px solid #CAD5E0;

     border-radius: 8px;

     min-height: 300px 

}

 .bio:after {

     content: '';

     display: block;

     position: absolute;

     top: -11px;

     width: 30px;

     height: 30px;

     background: #FFFFFF;

     border-right:1px solid #CAD5E0;

     border-top:1px solid #CAD5E0;

     -moz-transform:rotate(-45deg);

     -webkit-transform:rotate(-45deg);

}



 .first, .second, .third, .fourth, .bio-text, .bio-text-value{

     display: none;

}



 .imagebox {

     padding: 0px;

     position: relative;

     text-align: center;

     width: 100%;

}

 .imagebox img {

     opacity: 1;

     transition: 0.5s opacity;

     border-radius: 8px 

}

 .imagebox .imagebox-desc {

     background-color: #ffffff;

     bottom: 0px;

     color: #000000;

     font-size: 1.2em;

     left: 0px;

     padding: 10px 15px;

     position: absolute;

     transition: 0.5s padding;

     text-align: center;

     width: 100%;

     opacity: 0.5;

}

 .imagebox:hover img {

     opacity: 0.9;

}

 .imagebox:hover .imagebox-desc {

     padding-bottom: 10%;

     opacity: 0.9;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

   <div class="row">

      <div class="col-sm-4">

         <div class="imagebox" data-target="simon">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox"  data-target="vinnie">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox" data-target="stuart">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon">

                  <p>

                     Pickle Rick

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie">

                  <p>

                     batman

                  </p>

               </div>

               <div class="bio-text-value" id="stuart">

                  <p>

                     lego batman

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-sm-3">

         <div class="imagebox" data-target="simon-p">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox"  data-target="vinnie-l">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="stuart-w">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="david-h">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon-p">

                  <p>

                     Pickle Rick - 1

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie-l">

                  <p>

                     batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="stuart-w">

                  <p>

                     lego batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="david-h">

                  <p>

                     lego batman - 2

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

</div>

$(document).ready(function(){

    $(".imagebox").on('click', function(){



  var obj = $(this);

      var bio = $(obj).siblings().find('.bio');

      var dataTarget = $(obj).data("target")

      var parent= $("#" + dataTarget).parents('.bio-text')    

      var target = $("#" + dataTarget)

      var parentId = parent.id;

      console.log(parent.is(':visible'))

        if ( parent.is(':visible') && target.is(':visible')){

        $('.bio').hide('slow');

        $('.bio-text').hide('slow');     

        $('.bio-text-value').hide('slow');

        }

      else{

        $('.bio').hide();

        $('.bio-text').hide();     

        $('.bio-text-value').hide();



        console.log(parent)

        target.fadeIn('fast')

        bio.fadeIn('slow');

        target.fadeIn('slow');

        parent.fadeIn('slow')

      }

  })  

})

.bio {

     margin-left: 15px;

     background: #FFFFFF;

    /*border: 1px solid #CAD5E0;

    */

     border-radius: 8px;

     position: absolute;

     z-index: 9 

}

 .bio-text {

     margin-top:4px;

     width: 97%;

     background: #FFFFFF;

     border: 1px solid #CAD5E0;

     border-radius: 8px;

     min-height: 300px 

}

 .bio:after {

     content: '';

     display: block;

     position: absolute;

     top: -11px;

     width: 30px;

     height: 30px;

     background: #FFFFFF;

     border-right:1px solid #CAD5E0;

     border-top:1px solid #CAD5E0;

     -moz-transform:rotate(-45deg);

     -webkit-transform:rotate(-45deg);

}



 .first, .second, .third, .fourth, .bio-text, .bio-text-value{

     display: none;

}



 .imagebox {

     padding: 0px;

     position: relative;

     text-align: center;

     width: 100%;

}

 .imagebox img {

     opacity: 1;

     transition: 0.5s opacity;

     border-radius: 8px 

}

 .imagebox .imagebox-desc {

     background-color: #ffffff;

     bottom: 0px;

     color: #000000;

     font-size: 1.2em;

     left: 0px;

     padding: 10px 15px;

     position: absolute;

     transition: 0.5s padding;

     text-align: center;

     width: 100%;

     opacity: 0.5;

}

 .imagebox:hover img {

     opacity: 0.9;

}

 .imagebox:hover .imagebox-desc {

     padding-bottom: 10%;

     opacity: 0.9;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

   <div class="row">

      <div class="col-sm-4">

         <div class="imagebox" data-target="simon">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox"  data-target="vinnie">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-4">

         <div class="imagebox" data-target="stuart">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon">

                  <p>

                     Pickle Rick

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie">

                  <p>

                     batman

                  </p>

               </div>

               <div class="bio-text-value" id="stuart">

                  <p>

                     lego batman

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-sm-3">

         <div class="imagebox" data-target="simon-p">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">

            <div class="bio first">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox"  data-target="vinnie-l">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio second">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="stuart-w">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

      <div class="col-sm-3">

         <div class="imagebox" data-target="david-h">

            <a href="#hola">

            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">

            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>

            </a>

         </div>

         <div class="comments">

         </div>

         <div class="offset-md-5 offset-sm-4 offset-5">

            <div class="bio third">

            </div>

         </div>

      </div>

   </div>

   <div class="row">

      <div class="col-md-12 col-sm-12 col-12">

         <div class="bio-text">

            <div class="col-md-12 col-sm-12 col-12">

               <div class="bio-text-value" id="simon-p">

                  <p>

                     Pickle Rick - 1

                  </p>

               </div>

               <div class="bio-text-value" id="vinnie-l">

                  <p>

                     batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="stuart-w">

                  <p>

                     lego batman - 1

                  </p>

               </div>

               <div class="bio-text-value" id="david-h">

                  <p>

                     lego batman - 2

                  </p>

               </div>

            </div>

         </div>

      </div>

   </div>

</div>

javascript jquery html css

edited Mar 15 at 17:00

200_success

130k17155419

asked Mar 15 at 15:36

Simon Price

1416

edited Mar 15 at 17:00

200_success

130k17155419

asked Mar 15 at 15:36

Simon Price

1416

edited Mar 15 at 17:00

200_success

130k17155419

edited Mar 15 at 17:00

200_success

130k17155419

edited Mar 15 at 17:00

200_success

130k17155419

asked Mar 15 at 15:36

Simon Price

1416

asked Mar 15 at 15:36

Simon Price

1416

asked Mar 15 at 15:36

Simon Price

1416

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f215515%2fshowing-and-hiding-information-with-photos%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Code Review Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

Use MathJax to format equations. MathJax reference.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ggthjy