Alter the placement of two bootstrap rows based on the button that is selected

Question

Alter the placement of two bootstrap rows based on the button that is selected

I have a webpage with two bootstrap rows and two buttons positioned at the top of the screen. I want to achieve a functionality where clicking the second button will bring the second row on top of the first row, and vice versa.
Here are my two rows:

<div class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
           Text
    </div>
</div>

<div class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          Text 2
    </div>
</div>

Below is the code for my buttons:

 <button class="regular mothers_day_first_button" id="mothers_day1">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2">Second row on top</button>

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

One approach is to use special data-* attributes on buttons to indicate which div should be moved to the top. When a button is clicked, the corresponding div specified in its data-target-div attribute is cloned and then removed from the DOM. The cloned div is then inserted at the beginning of the main div using prepend

$(function(){
  $('button.regular').on('click',function(){
     var $div = $($(this).data('target-div'));
     var clonedDiv = $div.clone();
     $div.remove();
     $('#mainDiv').prepend(clonedDiv);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<div id="firstDiv" class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
            Text 1
    </div>
</div>

<div id="secondDiv" class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          Text 2
    </div>
</div>
</div>


 <button class="regular mothers_day_first_button" id="mothers_day1" data-target-div="#firstDiv">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2" data-target-div="#secondDiv">Second row on top</button>

Answer 2

One approach is to use special data-* attributes on buttons to indicate which div should be moved to the top. When a button is clicked, the corresponding div specified in its data-target-div attribute is cloned and then removed from the DOM. The cloned div is then inserted at the beginning of the main div using prepend

$(function(){
  $('button.regular').on('click',function(){
     var $div = $($(this).data('target-div'));
     var clonedDiv = $div.clone();
     $div.remove();
     $('#mainDiv').prepend(clonedDiv);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<div id="firstDiv" class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
            Text 1
    </div>
</div>

<div id="secondDiv" class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          Text 2
    </div>
</div>
</div>


 <button class="regular mothers_day_first_button" id="mothers_day1" data-target-div="#firstDiv">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2" data-target-div="#secondDiv">Second row on top</button>

Answer 3

Answer №2

Hey there! Since your question mentioned the topic of Changing position, I wanted to share a solution with you. Please have a look at this demo: https://example.com/demo

HTML Code:

<button class="btn primary-btn" id="btn1">Button 1</button>

 <button class="btn secondary-btn" id="btn2">Button 2</button>

<div class="row row-share">
    <div class="col-xs-12">
           Content 1
    </div>
</div>

<div class="row row-create">
    <div class="col-xs-12">
          Content 2
    </div>
</div>

CSS Styles:

.row-share , .row-create{
    height:100px;
    margin:10px;
    border:1px solid grey;
    width:100px;
    position:relative;
    color:#fff;

}

.row-share {
   background:red;
} 

.row-create {
   background:blue;
}

jQuery Scripts:

$(document).ready(function(){
    $('#btn2').on('click', function(){
        console.log('Clicked button 2');
        $('.row-share').animate({top: "110px"}); 
        $('.row-create').animate({top: "-110px"});
    });

    $('#btn1').on('click', function(){
        console.log('Clicked button 1');
        $('.row-create').animate({top: "0px"}); 
        $('.row-share').animate({top: "0px"});
    });
});

Answer 4

Hey there! Since your question mentioned the topic of Changing position, I wanted to share a solution with you. Please have a look at this demo: https://example.com/demo

HTML Code:

<button class="btn primary-btn" id="btn1">Button 1</button>

 <button class="btn secondary-btn" id="btn2">Button 2</button>

<div class="row row-share">
    <div class="col-xs-12">
           Content 1
    </div>
</div>

<div class="row row-create">
    <div class="col-xs-12">
          Content 2
    </div>
</div>

CSS Styles:

.row-share , .row-create{
    height:100px;
    margin:10px;
    border:1px solid grey;
    width:100px;
    position:relative;
    color:#fff;

}

.row-share {
   background:red;
} 

.row-create {
   background:blue;
}

jQuery Scripts:

$(document).ready(function(){
    $('#btn2').on('click', function(){
        console.log('Clicked button 2');
        $('.row-share').animate({top: "110px"}); 
        $('.row-create').animate({top: "-110px"});
    });

    $('#btn1').on('click', function(){
        console.log('Clicked button 1');
        $('.row-create').animate({top: "0px"}); 
        $('.row-share').animate({top: "0px"});
    });
});

Answer 5

Answer №3

To easily rearrange elements, you can simply utilize the Element: before() method.

var element1 = document.getElementsByClassName('element')[0]
var element2 = document.getElementsByClassName('element')[1]

element2.before(element1);

Visit this link for more information.

Answer 6

To easily rearrange elements, you can simply utilize the Element: before() method.

var element1 = document.getElementsByClassName('element')[0]
var element2 = document.getElementsByClassName('element')[1]

element2.before(element1);

Visit this link for more information.

Alter the placement of two bootstrap rows based on the button that is selected

Answer №1

Answer №2

Answer №3

Similar questions

Unable to invoke the jQuery datetimepicker function within a personalized directive

The class in my CSS is currently impacting all the menu bar items, but I specifically want it to only affect my photo gallery

Pattern for ensuring testability in JavaScript

React Application Issue: Unable to successfully redirect to the homepage upon logging in

Trouble with vertical alignment and height in a floating division

Creating a Chrome extension that opens multiple tabs using JavaScript

What is the best way to utilize getInitialProps specifically during the building process of a NextJS site?

Passing parameters from the client-side to the code behind using ASP.NET AJAX

What is the reasoning behind the presence of hidden elements on the Google Search Result Page?

Although XPath works in Chrome, it is not compatible with Selenium

How to convert DateTime to UTC in TypeScript/JavaScript while preserving the original date and time

Finding it difficult to grasp the concept of asynchronous functions in NodeJS

The JavaScript function is returning a value of undefined

Recreating a JavaScript function in real-time upon updating

The most efficient method for handling a vast amount of data in NodeJS

Javascript dynamically generates CSS animations

Node.js Error: RegEx Pattern Does Not Match

What is the process of embedding a string with pug code into a pug file?

Are there any online JSONP services available that can provide the target location of a redirected link?

Uncertain about the request path that is being transmitted to my Express server via AJAX