<div class="applications-wrapper">
<div class="eye" id="onetwo"><a class="fa fa-eye" href="#"></a></div>
<div class="bar" id="twothree"><a class="fa fa-bars" href="#"></a></div>
</div>
My goal here is to reverse the order of the divs with class "bar" and "eye". When these links are clicked, the related content should also display. Only the link on the left should trigger the swap.
To achieve this, you can utilize the removeClass and addClass functions. Take a look at the code snippet provided below:
function ToggleClasses() {
if ($('#onetwo a').hasClass("fa-bars")) {
$('#onetwo a').removeClass("fa-bars").addClass("fa-eye");
}
else {
$('#onetwo a').removeClass("fa-eye").addClass("fa-bars");
}
if ($('#twothree a').hasClass("fa-bars")) {
$('#twothree a').removeClass("fa-bars").addClass("fa-eye");
}
else {
$('#twothree a').removeClass("fa-eye").addClass("fa-bars");
}
}
$('#onetwo').click(function () {
ToggleClasses();
});
$('#twothree').click(function () {
ToggleClasses();
});
Alternatively, you can use the following solution:
function ToggleClasses() {
$('#onetwo a').toggleClass("fa-bars fa-eye");
//$('#twothree a').toggleClass("fa-bars fa-eye"); Commented out as requested by @OP
}
If the requirement is to swap classes only when the left link is clicked, then the code related to $('#twothree a') should be commented.
Here is a solution that will get the job done. Check out this code snippet for swapping anchor tags:
$( document ).ready(function() {
console.log("ready");
$( "#onetwo" ).click(function() {
var temp = $(this).html();
$(this).html($("#twothree").html());
$("#twothree").html(temp);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="applications-wrapper">
<div class="bar" id="onetwo"><a class="fa fa-bars" href="#">Link1</a></div>
<div class="eye" id="twothree"><a class="fa fa-eye" href="#">Link2</a></div>
</div>$('.click-one-two').on('click', function(){
$('#one-two').show();
$('#two-three').hide();
});
$('.click-two-three').on('click', function(){
$('#two-three').show();
$('#one-two').hide();
});
I am currently managing a group of list items using "Next" and "Prev" buttons. The code displays five list items at a time, and by clicking "Next" or "Prev", you can navigate to view another set of five items. It's a straightforward operation that fun ...
I am attempting to automate clicking on all the "a" tags within a website using Selenium in Python. However, I found that all the "a" tags I want to click have the same structure as shown in the code snippet below. I tried clicking them by their class si ...
When my fingers are lifted from the keyboard, some code will be automatically executed. I want to trigger this function when I click a button (onclick) instead of using onkeyup. <div id="result"></div> <textarea ...
I am currently working with the following loop: <?php if( have_rows('modules') ): $counter = 0; while ( have_rows('modules') ) : the_row(); ?> <div class="col span_4_of_12 <?php if($counter == 0) { ?>firs ...
When I make an AJAX call to a REST API in my JavaScript code, the purpose is to fetch a JSON file. The structure of the AJAX call resembles something like this: $.ajax(ajaxObj).then(function(response) {}).catch(function(err) {}); The network monitor refl ...
I'm encountering an issue where a form isn't passing one variable. Here is my table structure: Schema::create('projects', function(Blueprint $table) { $table->increments('id'); $table->string(&apos ...
I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...
I am facing an issue with draggable divs that have position:absolute set inside a position:relative parent div. The problem occurs when I drag the divs to the edge of the parent container, causing them to shrink in size. I need the draggable divs to mainta ...
I am currently designing a website and I am aiming for a specific layout. Any advice on how to achieve this would be greatly appreciated. The header of the page consists of: a logo aligned to the left within an <a> tag 2 widgets placed in <asid ...
I am tasked with creating a specific list format using values from a JSON object. <li> <span class="room">A20</span> <span class="dropin">3</span> <span class="appoint">1</span> <span class="del ...
I am facing an issue where the autocomplete dropdown (div with class "pac-container") is consistently 4 pixels shy of aligning perfectly with the right side of the input field. It looks like this: https://i.sstatic.net/Y0oq1.png Below is the HTML code: ...
I am working on creating a layout using Vuejs and flexbox that includes elements like 'header, sidebar, main-content, sidebar, footer'. I have separated each part of the layout into individual .vue files, such as header.vue and sidebar.vue. In ...
I am currently working on a jQuery script that generates a lightbox span when the drop-down menu is changed. My objective is to display an image when the drop-down menu changes and allow users to click on the image to open the lightbox on the screen. The ...
I am trying to add the data-columns attribute for salvattore.js, but I am facing an issue where I cannot simply add the attribute without providing a value. Currently, my code looks like this: $('#liste-vdl div.view-content').attr("data-columns" ...
Struggling to align the captions of an image carousel at the bottom of the <ul>. No matter what I try, it just doesn't look right. Check out my Fiddle here Below is the HTML structure: <div class="carousel"> <ul> <l ...
I am in the process of creating a basic task list that allows users to input tasks. When the add button is clicked, the task will be added to an unordered list along with a delete button. As a beginner in JavaScript, I am struggling to figure out how to ma ...
I have a block of HTML code that includes a heading and two paragraphs: <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and foll ...
Utilizing ajax for paging has led me to choose Sammy.js, which works well. However, incorporating checkboxes to filter results poses a challenge. While defining a route for Sammy to intercept is feasible, the issue arises when I wish to avoid displaying ce ...
I've been on a quest to find a solution that covers the following requirements: Convert SASS to CSS Post-process CSS Minify CSS Move it to a different location Bundle all Javascript into one file Create compatibility for older browsers Tre ...
I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...