Jquery slideToggle and hover issues

Question

I am developing a page that has team members photos. When you click on their photo I am using a JQuery slideToggle function to have each of their descriptions slide down. I also want their name to appear when hovering over their photo and remain their while their description is shown. Is there a way to have these two functions work together? I used CSS hover effect but it is not working with the Jquery function.

The other issue I am having related to this page is how it breaks down to mobile. I have a three column layout for desktop and a two column layout for mobile. When I have my HTML organized with photo then matching description directly after it causes all of the photos in that row to slide down. I want the photos in each row to always remain next to one another. The other thing I can do is have the HTML be organized with three photos then three descriptions. This causes an issue in mobile view because of the two column layout.

Any suggestions are greatly appreciated!

Here is my HTML(The first photo has the hover effect and the rest just have the slideToggle function)

 $('img[data-char=togglephoto1]') $(function() { $('.toggledesc').hide(); $('.togglephoto').on('click', function() { var toggleid = $(this).attr('data-toggleid'); $('.toggledesc').not('.' + toggleid).slideUp("slow") $('.' + toggleid).slideToggle("slow"); }); }); 

 .portfoliowork { width: 33%; float: left; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1%; } .textappear { position: absolute; top: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 20px 20px 20px; color: #f00; background-color: rgba(255, 255, 255, .9); width: 100%; height: 100%; line-height: 100px; text-align: center; z-index: 10; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .textappear:hover { opacity: 1; } .workimg { z-index: 1; } .appearimg { width: 33%; display: block; position: relative; } @media screen and (max-width: 500px) { .portfoliowork { width: 50%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="portfoliowork appearimg"> <div class="textappear"> <p>Name should appear here</p> </div> <img src="images/portfolioph.jpg" class="togglephoto workimg" data-toggleid="toggledesc4"> </div> <div class="portfoliowork"> <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5"> </div> <div class="portfoliowork"> <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc6"> </div> <div class="whowearetext toggledesc toggledesc4"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="whowearetext toggledesc toggledesc5"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="whowearetext toggledesc toggledesc6"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="portfoliowork"> <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc7"> </div> <div class="portfoliowork"> <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc8"> </div> <div class="portfoliowork"> <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc9"> </div> <div class="whowearetext toggledesc toggledesc7"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="whowearetext toggledesc toggledesc8"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="whowearetext toggledesc toggledesc9"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> 

Answer 1

Simplify your HTML:

 $('.portfoliowork').click(function(){$('.portfoliowork').not(this).removeClass('active');$(this).toggleClass('active');}); 

 .portfoliowork { overflow:hidden; float: left; margin-left: 5px; width: calc(100% / 3 - 15px); margin-bottom: 200px } .portfoliowork img { width: 100%; height: auto; } .portfoliowork p { position: absolute; left:0; display: none; } .portfoliowork.active p {display: block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="portfoliowork"> <img src="http://placehold.it/100x100"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="portfoliowork"> <img src="http://placehold.it/100x100"> <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="portfoliowork"> <img src="http://placehold.it/100x100"> <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div class="portfoliowork"> <img src="http://placehold.it/100x100"> <p>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> 

Answer 2

I tried to solve your problem ,Rather than display name of person on hover its displaying on click event .Please check Output on : https://jsfiddle.net/nu5mbqcd/2/

To implement this solution please go step by step:

step1: replace following code

  <img src="images/portfolioph.jpg" class="togglephoto"   data-toggleid="toggledesc5" >

by

   <div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left"> 

      <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5" tid="">
      <div class="tool-tip right">Name1</div>
  </div>

step 2: Add css

.tool-tip{
   color: #fff;
   background-color: rgba( 0, 0, 0, .7);
   text-shadow: none;
   font-size: .8em;
   visibility: hidden;
    -webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    -o-border-radius: 7px; 
    border-radius: 7px; 
    text-align: center; 
    opacity: 0;
    z-index: 999;
   padding: 3px 8px;    
   position: absolute;
   cursor: default;
    -webkit-transition: all 240ms ease-in-out;
    -moz-transition: all 240ms ease-in-out;
    -ms-transition: all 240ms ease-in-out;
    -o-transition: all 240ms ease-in-out;
    transition: all 240ms ease-in-out;  
   }

/* tool tip position right */

.tool-tip.right{
    top: 50%;
    right: auto;
    left: 106%;
    margin-top: -15px;
    margin-right: auto; 
    margin-left: auto;
}

.tool-tip.right:after{
    left: -5px;
    top: 50%;   
    margin-top: -6px;
    bottom: auto;
    border-top-color: transparent;  
    border-right-color: rgba( 0, 0, 0, .7); 
}


/* on hover of element containing tooltip default*/

.on-focus img[tid="1"] + .tool-tip{
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 240ms ease-in-out;
    -moz-transition: all 240ms ease-in-out;
    -ms-transition: all 240ms ease-in-out;
    -o-transition: all 240ms ease-in-out;
    transition: all 240ms ease-in-out;      
}

Step 3: replace jquery code by following code:

 $('img[data-char=togglephoto1]')
    $(function(){
    $('.toggledesc').hide();

    $('.togglephoto').on('click', function(){
        var toggleid = $(this).attr('data-toggleid');

        if( $('.' +toggleid).is(":hidden")) {
            $(this).attr('tid','1');  
         }
        else {
            $(this).attr('tid','');     
        }
        $('.' +toggleid).slideToggle("slow");

    });

  });

Hope this will help you.