CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Colin Stewart
Colin Stewart

Reputation: 91

How to create slider with titles instead of arrows

I have created a row of four headings across the page with descriptions for each below. I would like it beginning with the first title highlighted and the first description only. When each title is clicked, the description changes (slides) to match). Basically a slider but instead of arrows – titles. What is the best/easiest way to achieve this? Thanks.

.facilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 30px 0;
  max-height: 40px;
}

.facilities .heading {
  flex: 0 0 25%;
}

ul.facility-descriptions {
  font-family: 'Montserrat',"Helvetica-Neue",Helvetica,Arial,sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  padding: 0;
  margin: 0;
}

ul.facility-descriptions li {
  list-style: none;
}
<div class="facilities">
  <div class="heading"><p>FACILITIES MANAGEMENT</p></div>
  <div class="heading"><p>CATERING SERVICES</p></div>
  <div class="heading"><p>CLEANING SERVICES</p></div>
  <div class="heading"><p>CAMP RELOCATIONS</p></div>
</div>
<ul class="facility-descriptions">
  <li>We are responsible for the effective management of on-site accommodation on behalf of our clients. Our specialist staff in camp management and catering have a wealth of experience and proven record of accomplishment in this industry. Our services are supported with safe documented systems of work and are environmentally sustainable.</li>
  <li>Our menus aim to provide a wide choice for clients and residents whilst providing the necessary nutritional balance to support an individual's daily requirements. When compiling our menus, we consult widely and create recipes that take into consideration dietary guidelines to promote healthy living.</li>
  <li>We address all cleaning requirements on-site including detailed cleaning of specialised areas. We ensure that all camp quarters, rooms, and ablutions are maintained to an optimum hygienic condition. Services include daily cleaning, bed making, washing of guest's apparels, bed linen changed weekly and on departure of guests or when specifically requested, and twice daily cleaning of ablutions.</li>
  <li>The synergies associated with our transport and logistics activities enable us to bring added value to our clients when it comes to mobilisation, relocation or demobilisation of remote camp facilities. We operate a fleet of prime movers, winch trucks, specialised trailers, forklifts and all terrain mobile cranes complemented by a professional team of multi-skilled, experienced operators. This allows us to relocate camps in geographically diverse fields across a variety of remote locations.</li>
</ul>

Upvotes: 1

Views: 82

Answers (1)

ppasler
ppasler

Reputation: 3729

An easy way would be JavaScript (Get started here: http://www.w3schools.com/js). I've added jQuery, as it make life with JS much easier.

If your solution is index-based (first header shows first description), this could be a simple solution:

var headerList = $(".heading");
var descList = $(".facility-descriptions li");
var index = 0;

headerList.click(function(){
  $(descList[index]).hide();
  index = headerList.index($(this));
  $(descList[index]).show();
});
.facilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 30px 0;
  max-height: 40px;
}

.facilities .heading {
  flex: 0 0 25%;
  cursor: pointer;
}

ul.facility-descriptions {
  font-family: 'Montserrat',"Helvetica-Neue",Helvetica,Arial,sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  padding: 0;
  margin: 0;
}

ul.facility-descriptions li {
  list-style: none;
  display: none;
}

ul.facility-descriptions li:first-child {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="facilities">
  <div class="heading"><p>FACILITIES MANAGEMENT</p></div>
  <div class="heading"><p>CATERING SERVICES</p></div>
  <div class="heading"><p>CLEANING SERVICES</p></div>
  <div class="heading"><p>CAMP RELOCATIONS</p></div>
</div>
<ul class="facility-descriptions">
  <li>We are responsible for the effective management of on-site accommodation on behalf of our clients. Our specialist staff in camp management and catering have a wealth of experience and proven record of accomplishment in this industry. Our services are supported with safe documented systems of work and are environmentally sustainable.</li>
  <li>Our menus aim to provide a wide choice for clients and residents whilst providing the necessary nutritional balance to support an individual's daily requirements. When compiling our menus, we consult widely and create recipes that take into consideration dietary guidelines to promote healthy living.</li>
  <li>We address all cleaning requirements on-site including detailed cleaning of specialised areas. We ensure that all camp quarters, rooms, and ablutions are maintained to an optimum hygienic condition. Services include daily cleaning, bed making, washing of guest's apparels, bed linen changed weekly and on departure of guests or when specifically requested, and twice daily cleaning of ablutions.</li>
  <li>The synergies associated with our transport and logistics activities enable us to bring added value to our clients when it comes to mobilisation, relocation or demobilisation of remote camp facilities. We operate a fleet of prime movers, winch trucks, specialised trailers, forklifts and all terrain mobile cranes complemented by a professional team of multi-skilled, experienced operators. This allows us to relocate camps in geographically diverse fields across a variety of remote locations.</li>
</ul>

Please note that there are millions of solutions on the internet, consider using one of them. I think what you are looking for are tabs:

Upvotes: 1

Related Questions