Slider in desktop mode and toggle in mobile mode

185 viewscsshtmljavascriptjquerywordpress
0

I would like to do the following:

-add two destinations: Barcelona and Madrid in the same line (table with 2 columns 1 row ) that is responsible in mobile mode

On desktop mode:

-when I click one of the destinations, the tours list for that specific destination should be shown below the image, if I click on the second destination, should close the first destinations tours and show the second clicked destination tours below the image

[image1] | [image2]

(tours list 1 / tours list 2)

On mobile mode:

-the first list of tours (Barcelona) should appear between the two destinations, the second
after the second destination

[image1]

(tours list 1)

[image2]

(tours list 2)

How can I do that? The design also has some problems.

Thanks

$(function() {
  $('.showSingle').click(function() {
    $('.targetDiv').not('#div' + $(this).attr('target')).hide('slow');
    $('#div' + $(this).attr('target')).toggle('slow');
  });
});
.showSingle, targetDiv
{
   padding-top:20px;
   padding-right:20px;
   padding-bottom:20px;
}
.showSingle img, targetDiv
{
    border:5px solid white;
}

.nrtours_destinations
{
   position:absolute;
   color:#333;
   background-color:white;
   font-size:1.2em;
   width: 70px;
   /*margin-left:auto;
   margin-right:auto;*/
   margin-left:225px;
   padding-left:3px;
   top: 40px;
  
}

.barcelona_destinations,
.madrid_destinations
{
   position:absolute;
   color:#333;
   background-color:white;
   font-size:4em;
   width: 300px;
   margin-left:auto;
   margin-right:auto;
   top: 235px;
text-align: center;
padding-top:16px;
height:60px;
   opacity:0.8;
   cursor:hand;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="buttons">
  <a class="showSingle" target="1">
  <span class="barcelona_destinations">Barcelona</span><span class="nrtours_destinations">3 Tours</span><img src="https://artistatours.com/wp-content/uploads/2022/07/pexels-enrico-perini-819764-636x636.jpeg" class="destination-img" alt="El Tour Más Completo de Barcelona"  width="300px">
   
  </a>
  <a class="showSingle" target="2">
        <span class="madrid_destinations">Madrid</span><span class="nrtours_destinations">1 Tour</span><img src="https://artistatours.com/wp-content/uploads/2024/01/madrid-385104_1280-636x636.jpg" class="destination-img" alt="¡Madrid al Completo!(Con actores)" width="300px">
  </a>
</div>
<span style="clear:both;"><span>
<div id="div1" class="targetDiv" style="display:none;">Barcelona Tours</div>
<div id="div2" class="targetDiv" style="display:none;">Madrid Tours</div>
</div>