I Caie Posted October 14, 2019 Share Posted October 14, 2019 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 14, 2019 Share Posted October 14, 2019 .team-members { width: 25%; display: inline-block; padding: 3.8em; vertical-align: top; /* add this */ } 1 Link to comment Share on other sites More sharing options...
I Caie Posted October 15, 2019 Author Share Posted October 15, 2019 that worked perfectly thanks so much. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now