Changing divs with Jquery

Question

I am currently trying to change the position of a few

divs

using jquery. My main idea is that when I click the left arrow, the div assigned to the specific location swaps places with the one on the left, when I click it again it swaps places with the div further on the left. When I click the right arrow, the same thing happens but for elements on the right side.

Here is my HTML code:

<input type ="radio" name ="tabs" id = "tab-2">

<label for="tab-2"><i class="fa fa-newspaper-o fa-3x" aria-hidden="true" id="paper"></i><div class ="news">LATEST NEWS</div></label>

<div class ="tab-content-two">

    <h3 id="latest-news">Latest News</h3>

    <i class="fa fa-angle-left" id="left"></i>

    <i class="fa fa-angle-right" id="right"></i>



    <img src = "img/1.jpg" id ="first-img">

    <div class ="hilight" id="img-text">

        <h4 id="news">Latest News Story<br>Title Example</h4>

    </div>



    <img src ="img/2.jpg" id ="second-img">

    <div class ="hilight-two"id="img-text">

        <h4 id="news">Latest News Story<br>Title Example</h4>

    </div>



    <img src ="img/3.jpg" id ="third-img">

    <div class ="hilight-big" id ="full-text">

        <h4 id="news-big">Latest News Story<br>Title Example</h4>

        <p id="date">14/02/2016</p>

        <p id ="text-big">Lorem ipsum dolor sit amet,<br> 

            consectetur adipiscing elit.<br> 

            Phasellus imperdiet orci..

            <button type="button" id ="button-reading">CONTINUE READING <i class="fa fa-angle-right" id="reading"></button></i>

        </p>





    </div>



    <img src ="img/4.jpg" id ="fourth-img">

    <div class ="hilight-three"d="img-text">

        <h4 id="news">Latest News Story<br>Title Example</h4>

    </div>

</div>

And here is the jquery I'm trying to build in order to achieve this:

$( "left" ).click(function() {

  $( hilight-two ).replaceWith( "<div>" + $( text-big ).text() + "</div>" );

});



$( "right" ).click(function() {

  $( hilight-two ).replaceWith( "<div>" + $( text-big ).text() + "</div>" );

});

I've attached a JS Fiddle in order to have a better idea.
JS Fiddle

Here is a poorly created drawing of how it looks in the original version as well:

Answer 1

I made hilight a class to group all the divs and added modified your click handlers to

$( "#left" ).click(function() {
  var news = $(".hilight");
  var head = news.first().html();
  var length = news.length;
  for(var i = 0; i < length - 1; i++) {
      news.eq(i).html(news.eq(i + 1).html());
  }
  news.eq(length - 1).html(head);
});

$( "#right" ).click(function() {
     var news = $(".hilight");
   var tail = news.last().html();
   var length = news.length;
   for(var i = length - 1; i > 0; i--) {
       news.eq(i).html(news.eq(i - 1).html());
   }
   news.eq(0).html(tail);
});

I changed your css and your html a bit to use more classes and less id's. Here is the updated JSFiddle
https://jsfiddle.net/qu7cdwkt/5/

Hopefully this will get you started

Changing divs with Jquery

Sign up