Accoutergroupofcompanies

I've previously tired to use this code (below) to add a show more and show less feature to this page, initially showing 9 images and then revelling 9 more and so on. However, it doesn't appear to work when I use #expand-5 as this tutorial shows 

It only appears to show items that are more than 5 rows down and its not clean. Any tips?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var SHOW_MORE = 'Show More' var COLLAPSE = 'Show Less' $(window).load(function(){ $('a[href^="#expand"]').each(function(){ var n = parseInt($(this).attr('href').split('-')[1]); var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n) next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>'); $(this).click(function(){ var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery') if (target_gallery.is(':visible')){ $(this).text(SHOW_MORE); } else { $(this).text(COLLAPSE); } target_gallery.slideToggle(); return false; }); }); }); </script> 

I want to create a carousel style preview for my blog on my websites homepage  (similar to this website https://www.taylranne.com) but have tried summary's and gallery's but can't seem to get a similar effect - any ideas?

I'm looking to add the attached infographic to this webpage (under the Landfill section) but I ideally want to to have a hover feature. So when you 1st go on the page you will see the Infographic as seen in 'before' but when hovering over each circle the 'after' will appear- providing the user with more info on the circle that they hover over (10 in total- so 10 different hovers) I've made interactive hove tables before but never based on an image and help would be great!

yes but it only saves as /portfolio-page-folder

Hi I've tried the above for another website but I can't get it to work. I want the portfolio (folder title) in the navigation bar to link to the following webpage https://www.knightfrankinteriors.com/portfolio-page any tips?

This is what I have managed to do so far https://www.boxnine7.com/s-portfolio-draft-1

However, there are still several issues with the grid:

• I can't seem to get the outline visible (ideally it would be #607750)
• I want the images to disappear when hovered over and just show the text
• The text should be read as a subtitle and then the body

Is there any chance you could advise on the above?

Where about in the code would this go? 

Below is the html code I have so far, I'm wanting to have the BOLD TITLES on a separate title form the text but I can't seem to do this whilst maintainting the hover effect- any ideas?

<div class="grid3">
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_413710">
         
           MADE TO ORDER
            
Made in accordance with our customer's specifications to minimise wastage in production.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_426339">HAND CRAFTED
            
Products and/or elements have been hand crafted by artisans to preserve craft traditions and support independent artisan businesses.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-42da99d4a0e6627c7afe">ETHICAL
            
Supply chain conforms with all relevant International Labour Organisation (ILO) policies surrounding child labour, workers rights, freedom of association, minimum wages and health & safety.</a></p>
      </div> 
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
       </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-e7a6854510ee77df193c">ORGANIC
            
Product is made up of >70% naturally occurring raw materials, without the use of chemical or other artificial elements.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-4b50be3d262d44b57a30">FSC TIMBER
            
Wood has been harvested in compliance with rules and regulations to protect our natural resources.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-b5d38cf44218ea76dfc5">THOUGHTFUL FURNITURE
            
Item is reclaimed, recycled or up cycled usually an Antique or Vintage item given a new life.</a></p>
      </div> 
</div>

How would I add images to this code? so that there would be images then you hover over and they would switch to text?

yes that would be great

Yes but if it could be images as the titles rather than words, the description is fine as a hover over lay. Also I don't need the colour features just a line outline Is enough

I've added an accordion to my webpage https://www.boxnine7.com/s-portfolio-draft but rather than word titles that expand I want there to be images that you click to expand to read the explanations. Is this possible?

I've attatched a reference image of what I'm going for, there does need to be subtitles but the option would be great

So I currently have a navigation folder with 3 dropdown links that go to different areas of the website. However, I want to actually link the folder title "Portfolio" to the link "https://www.boxnine7.com/#projects"