Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

Question

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

I am struggling with my code which has unnecessary information.

<div>   
  <div id="one" class="button"></div>
  <div id="two" class="button"></div>       
</div>

<div>
    <div class="Home tab">
      <h1> Greetings! </h1>
      <p> Welcome to my fantastic page! </p>
    </div>

    <div class="other tab">
      <h1> Artistic Expressions </h1>
      <p> Have a look at this amazing content! </p>
    </div>      
</div>

<script>
    $( "div.button" ).click(function() {
      $( "div.Home" ).toggleClass( "Show" );
      $( "div.Home" ).toggleClass( "tab" );
   });
</script>

<style>
   .tab
   {
      display: none;
   }
   .Show
   {
      display: block;
   }
</style>

My main issue lies within this code as I aim to click on button one and set the home, then proceed to click on button two and switch to other tabs. Unfortunately, my attempts to accomplish this have been unsuccessful due to my limited knowledge of JavaScript. Even trying both buttons to set home did not yield any results.

I am in dire need of assistance. Your help would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

$(document).ready(function(){
    $("#one").show();
    $('.button').click(function(){                
        $('.tab').hide();
        $("#" + $(this).data('id')).show();
    });
});

.tab{display: none;}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8>
        <title>Document</title>
        <style>

        </style>
    </head>
<body>
<div>   
            <div data-id="one" class="one button">1st tab</div>
            <div data-id="two" class="two button">2nd tab</div>       
        </div>

        <div>
            <div id="one" class="Home tab">
                <h1> Hello 1st tab is active</h1>
                <p> This is my amazing page </p>
            </div>

            <div id="two" class="other tab">
                <h1> art blah blag </h1>
                <p> This is my amazing page </p>
            </div>      
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    </body>
</html>

Answer 2

$(document).ready(function(){
    $("#one").show();
    $('.button').click(function(){                
        $('.tab').hide();
        $("#" + $(this).data('id')).show();
    });
});

.tab{display: none;}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8>
        <title>Document</title>
        <style>

        </style>
    </head>
<body>
<div>   
            <div data-id="one" class="one button">1st tab</div>
            <div data-id="two" class="two button">2nd tab</div>       
        </div>

        <div>
            <div id="one" class="Home tab">
                <h1> Hello 1st tab is active</h1>
                <p> This is my amazing page </p>
            </div>

            <div id="two" class="other tab">
                <h1> art blah blag </h1>
                <p> This is my amazing page </p>
            </div>      
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    </body>
</html>

Answer 3

Answer №2

The solution provided in your original post does work, however, it only toggles the visibility for the first button and not the second one.

To ensure that both buttons toggle the corresponding "page", make sure to include the jQuery library in your HTML file. You can either link to a CDN as shown below or download the library and reference it locally:

// When the DOM is ready
$(function() {
    // Listen for clicks on div.button elements
    $("div.button").click(function() {
        // Hide any currently visible tabs
        $('div.tab').hide();
        // Show the tab corresponding to the clicked button
        $('#' + $(this).data('tab')).show();
    });
});

 /* No need to use .show */
 .tab {
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <!-- Include data-tab attribute with the target tab ID -->
  <div id="one" data-tab="home" class="button">One</div>
  <div id="two" data-tab="other" class="button">Two</div>
</div>

<div>
  <!-- Use IDs instead of special class names for tabs -->
  <div class="tab" id="home">
    <h1> Hello </h1>
    <p>This is my amazing page</p>
  </div>

  <div class="tab" id="other">
    <h1> art blah blag </h1>
    <p>This is my amazing page</p>
  </div>
</div>

Answer 4

The solution provided in your original post does work, however, it only toggles the visibility for the first button and not the second one.

To ensure that both buttons toggle the corresponding "page", make sure to include the jQuery library in your HTML file. You can either link to a CDN as shown below or download the library and reference it locally:

// When the DOM is ready
$(function() {
    // Listen for clicks on div.button elements
    $("div.button").click(function() {
        // Hide any currently visible tabs
        $('div.tab').hide();
        // Show the tab corresponding to the clicked button
        $('#' + $(this).data('tab')).show();
    });
});

 /* No need to use .show */
 .tab {
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <!-- Include data-tab attribute with the target tab ID -->
  <div id="one" data-tab="home" class="button">One</div>
  <div id="two" data-tab="other" class="button">Two</div>
</div>

<div>
  <!-- Use IDs instead of special class names for tabs -->
  <div class="tab" id="home">
    <h1> Hello </h1>
    <p>This is my amazing page</p>
  </div>

  <div class="tab" id="other">
    <h1> art blah blag </h1>
    <p>This is my amazing page</p>
  </div>
</div>

Answer 5

Answer №3

To incorporate the jquery library into your code, make sure to include this line before the script tag:

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

Answer 6

To incorporate the jquery library into your code, make sure to include this line before the script tag:

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

Answer 7

Answer №4

If you want to use JavaScript to click on one <div> and alter the settings of another <div>, you can achieve this by following these steps:

First, in your HTML code, create two <div> elements with unique IDs assigned to them.

Next, in your JavaScript code, define a function that will handle the click event and make changes to the second <div>. Use the getElementById method to access the DOM elements via their IDs and then adjust their styles or properties accordingly.

function modifySettings() {
  var targetDiv = document.getElementById('targetDiv');
  targetDiv.style.backgroundColor = 'green';
  targetDiv.style.color = 'black';
  targetDiv.innerHTML = 'New settings applied!';
}

<div id="firstDiv" onclick="modifySettings()" role="button">Click here</div>
<div id="targetDiv">This div's settings will be altered</div>

In this example, the modifySettings() function adjusts the background color, text color, and inner content of the second <div>.

You can further enhance the styling of these <div> elements using CSS either externally or inline.

That's all! By clicking on the first <div>, it will trigger the modifySettings() function, thereby changing the properties of the second <div>.

Answer 8

If you want to use JavaScript to click on one <div> and alter the settings of another <div>, you can achieve this by following these steps:

First, in your HTML code, create two <div> elements with unique IDs assigned to them.

Next, in your JavaScript code, define a function that will handle the click event and make changes to the second <div>. Use the getElementById method to access the DOM elements via their IDs and then adjust their styles or properties accordingly.

function modifySettings() {
  var targetDiv = document.getElementById('targetDiv');
  targetDiv.style.backgroundColor = 'green';
  targetDiv.style.color = 'black';
  targetDiv.innerHTML = 'New settings applied!';
}

<div id="firstDiv" onclick="modifySettings()" role="button">Click here</div>
<div id="targetDiv">This div's settings will be altered</div>

In this example, the modifySettings() function adjusts the background color, text color, and inner content of the second <div>.

You can further enhance the styling of these <div> elements using CSS either externally or inline.

That's all! By clicking on the first <div>, it will trigger the modifySettings() function, thereby changing the properties of the second <div>.

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using inline styles can cause Content Security Policy (CSP) violations in applications

Updating a data table using POST values in ASP.NET: A step-by-step guide

Leveraging React's UseEffect() to retrieve information from GraphQL

The Query.formatError message indicates that there is an issue with the 'users.email' column in the where clause of the database query

The Highcharts download feature is not available when the title is removed

Exploring the Power of Elasticsearch with Datatables

Camera Capacitor designed to eliminate popup notifications

Is there a more efficient method to select all the rows containing '1's in a specific cell within a large range of data?

Using React Material UI checkboxes: Learn how to manipulate other checkboxes within a group by toggling a single checkbox

What are the steps to incorporate a jquery-ui checkbox into a widget?

What is the best way to make changes to elements in an express array?

Which is better: using a jQuery cookie plugin or PHP cookie?

The XMLHTTP request and Chrome developer tools do not show matching information

Utilizing conditional statements in React js to showcase a distinct component

Discover the method to retrieve the value of the closest input using JQuery

JavaScript is unable to identify the operating system that is running underneath

Is there a way to retrieve data from three different Bookshelf.js models in a single query?

php failure to execute included file

Issue with Input[type="search"] functioning properly on Internet Explorer versions 9 and earlier

iPhone users may encounter a freezing issue with the footer when scrolling