Jump to content
I Caie

Fix collapsible elements

Recommended Posts

Hi new to this so hopefully, someone can point me in the right direction.. currently trying to use this https://www.w3schools.com/howto/howto_js_collapsible.asp to create a staff profile element. i have changed it so the elements sit side by side but when I click on the hidden content it pushes the other two elements down the page. I would like them to stay in line with the content appearing below.  my reworking of the code is this.. HELP

 

  /*the team section CSS*/

.the-team{
    clear: both;
}

.the-team-inner{
    margin: 0 auto;
    width: 80%;
    padding: 4.5em;
}

.team-members{
    width: 25%;
    display: inline-block;
    padding: 3.8em;
}

.team-members img{
    width: 100%;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.4em;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<!-- THE TEAM HTML-->
    
    <div class="the-team">
        <div class="the-team-inner">
        

        <div class="team-members">    
<img src="images/headshot.png" alt="headshot one">
<button class="collapsible">Ronnie Garrick</button>
<div class="content">
  <p>Ronnie has over 30 years of global energy industry experience and has played an integral role within a number of technology-focused companies.  Ronnie has a strong a track record of internationalisation and export in both the onshore and offshore markets – his expertise has been gained within key Director roles in operations, sales, finance and board level activity.</p>
<p>Starting his career with BP working at the Grangemouth Oil refinery in Scotland, Ronnie has successfully led a number of M&A’s including the sale of a global oilfield service firm to Lime Rock Partners in 2007.  He continued as CEO to lead the company with its international expansion in regions including the US, Norway, Middle East and Europe until his exit following the successful sale to Buckthorn Partners in 2017. </p>
<p>He currently sits as a Non-Exec Director on the investor Board of TWMA and is looking forward to assisting and transforming businesses through the combined expertise of Garrick Group.
</p>
</div>
            
        </div>
            

        <div class="team-members">    
<img src="images/headshot.png" alt="headshot one">
<button class="collapsible">Davie Garrick</button>
<div class="content">
  <p>Davie started his career in Shetland as an apprentice plant mechanic and has gained years of experience both on and offshore.  Playing a key role across multiple disciplines, Davie has been integral in building the capabilities and global reach of oil service businesses within the energy sector.</p>
<p>Following the merger to form TWMA, and subsequent sale to Lime Rock Partners in 2007, Davie exited the business in 2017 and continues to sit as a non-exec Director on the Investor Board.</p>
<p>With an operational, technical and commercial skillset, he aims to use his experience and track record in the industry for further non-exec and investment opportunities.  
</p>
</div>
            
        </div>
            

        <div class="team-members">    
<img src="images/headshot.png" alt="headshot one">
<button class="collapsible">Douglas Garrick </button>
<div class="content">
  <p>Douglas has over 25 years of experience gained in directing businesses through acquisitions, disposals, funding and private equity.  As Finance Director, Douglas led a global oil services firm from a privately owned SME to become an equity backed £50million turnover organisation with 550 staff.  Following his exit from TWMA, Douglas now aims to use his finance and commercial track record to assist other growing businesses in related industries.</p>
<p>His other areas of expertise include legal disputes and resolutions, disposals, funding, property management and insurances. </p>
<p>Douglas has completed the Non-Executive Director Programme at the University of Edinburgh Business School and Institute of Directors.
</p>
</div>
            
        </div>
    
            
        </div>            
    </div>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...