0

I have 4 divs, each contain a link which opens a new different div below all 4 (it's a section about services), for mobile screens (669px and below) I need the div which the link opens to display underneath the div containing the link instead of below all 4 divs.

I've tried some of the answers on here already such as

function resize(){
if($(window).width() < 670){
$("#service1").insertAfter("#service-box1");
}
}

but I'm sure I'll be doing something wrong when putting it in my code

Here's the simplified html for the divs

<div id="services-container" class="row">


 <div class="service" id="service-box1">
  <h1>Title</h1>
  <a class="learn-more" id="show1" data-href="service1">Learn More</a>
 </div>
 <div class="service" id="service-box2">
  <h1>Title</h1>
  <a class="learn-more" id="show2" data-href="service2">Learn More</a>
 </div>
 <div class="service" id="service-box3">
  <h1>Title</h1>
  <a class="learn-more" id="show3" data-href="service3">Learn More</a>
 </div>
 <div class="service" id="service-box4">
  <h1>Title</h1>
  <a class="learn-more" id="show4" data-href="service4">Learn More</a>
 </div>


 <div class="service-content" id="service1">
  <h1>Service1</h1>
 </div>
 <div class="service-content" id="service2">
  <h1>Service2</h1>
 </div>
 <div class="service-content" id="service3">
  <h1>Service3</h1>
 </div>
 <div class="service-content" id="service4">
  <h1>Service4</h1>
 </div>


</div>

Here's the function to open the service-content div for the first div

$('document').ready(function() {
$('#show1').click( function() {
var $div = $('#' + $(this).data('href'));
$('.service-content').not($div).hide();
$div.slideToggle();
});
});

That code opens the service-content divs below all 4 of the service divs. On mobile screens I need service1 to display under service-box1 and above service-box2 and so-on. I don't know whether this means reworking the whole code or if there's a function to do it, any help is appreciated.

dulhac
  • 103
  • 8

2 Answers2

0

I think you can easily achieve this using CSS with flexbox or grids. A sample using flexbox is created by me over https://jsfiddle.net/saksham_malhotra/tjom0Le1/

The main concept here is to use media queries as

@media (max-width:600px) { 
    /*Your logic here*/
}

Just try to resize the window in the sample an see the layout change.

Saksham
  • 9,037
  • 7
  • 45
  • 73
0

A good way to archieve this problem is to see how others do it. HERE IS logic used in bootstrap 3 (and 4). You can look at bootstrap library code or just use it.

wozniaklukasz
  • 161
  • 1
  • 12