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>