Toggle between hiding and showing div elements issue

Currently in the final stages of developing an iPhone web app, I have encountered a small issue that needs to be resolved.

I have successfully hidden one layer and displayed another with a button click. However, what I am aiming for is to toggle between showing the initially hidden layer and hiding the currently displayed layer when the button is clicked again. In essence, reverting back to the original state with each click.

The current code snippet being used is as follows:

<script type="text/javascript">


function toggle_layout(d)
{
    var onediv = document.getElementById(d);
    var divs=['Posts','Posts2'];

    for (var i=0;i<divs.length;i++)
    {
        if (onediv != document.getElementById(divs[i]))
        {
            document.getElementById(divs[i]).style.display='none';
        }
    }

    onediv.style.display = 'block';
}


</script>

While this script effectively hides the "Posts" div and displays the "Posts2" div, it does not reverse the effect upon clicking again.

If interested in exploring my website, you can visit . Please view it on a mobile device to see the issue at hand.

Answer №1

Did you experiment with using style.visibility (visible|hidden) as opposed to style.display?

Answer №2

Suppose you have div elements set up like this:

<div id="section1"></div>
<div id="section2"></div>

You can implement the following JavaScript code to toggle between them:

var section1 = document.getElementById('section1'),
    section2 = document.getElementById('section2');

function switchSections() {
    if (this == section1) {
        section1.style.display = 'none';
        section2.style.display = 'block';
    } else {
        section1.style.display = 'block';
        section2.style.display = 'none';
    }
}

div1.onclick = switchSections;
div2.onclick = switchSections;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to structure keywords in Microdata for a CreativeWork?

As I delve into Microdata, I am exploring the utilization of Schema.org's keywords for CreativeWork. The schema indicates that it should be text, but I am unsure whether to place each keyword in a separate element with itemprop="keywords", or include ...

In the world of Node.js and Java, the concepts of "if"

Here is a code snippet that I am working with: var randFriend = friendList[Math.floor(Math.random() * friendList.length)]; if (randFriend == admin) { //Do something here } else if (randFriend != admin) { client.removeFriend(randFriend); } I am tr ...

Adding JSON information into a .js file using ajax technology

I am currently working on integrating a calendar template into my system. In the demo JavaScript file, example events are structured like this: events: [ { id: 1, title: 'Title 1', start: ('2016-01-02'), ...

What is the best way to control and manipulate this parallax effect?

Having trouble getting the icon dog to appear correctly in this parallax effect. I want the full body of the dog icon to be displayed over the section, but I'm having no luck so far. Please see my code below and let me know if there are any correction ...

Accessing a Global Variable within a Node Express Class Module

Within my Node Express application, I defined a variable in app.js like so: let accounts = [checkingAccount, savingAccount] Now, I have a class file named account.js (not a route) and I need to access the accounts array from within it. How can I achieve t ...

Vue js: Stop Sorting array items; only display the resulting array

I recently came across a tutorial on voting for a Mayoral Candidate. The tutorial includes a sort function that determines the winner based on votes. However, I noticed that the sort function also rearranges the candidate list in real time, which is not id ...

Retrieve information upon clicking on a table entry

Currently, I am displaying data from the "login" table in MySQL using PHP within an HTML table. Take a look at the code snippet below: <table class="table"> <thead class="thead-dark"> < ...

Fetching data from Page 1 and passing it to Page 2 using Javascript

I'm currently experiencing an issue with my AJAX function where it needs to transfer a value from page 1 to page 2 for storage. Let's start with the AJAX function on page one: top.location.href = 'http://www.something.com/redirect.php?emai ...

What are the steps for integrating a CMS with my unique website design?

Currently, I am in the process of creating a unique website for a client using my own combination of html, css, and JavaScript. There is also a possibility that I may incorporate vueJS into the design. The client has expressed a desire to have the ability ...

Using Vue.js to invoke an external JavaScript function for search functionality

In my vue.js application, I have a list of users with backend pagination. Now I want to implement a search functionality. I attempted to call the method like this: watch: { search: function() { Crud.methods.getItems(); } }, Howe ...

Series of responses cascading from one another

Users are experiencing an issue where the need for adjusting margins based on the depth of responses in posts. Currently, this involves setting a margin-left value of 40px for one level deep reactions and 80px for two levels deep, and so on. To address th ...

How to organize initial, exit, and layout animations in Framer Motion (React) tutorial?

Currently, I am utilizing framer-motion library for animating a change in grid columns. This is the objective: Within the grid container (#db-wrapper), there are nine buttons arranged. https://i.stack.imgur.com/61pQqm.png When the user switches to the ...

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages

I am facing a critical need for a code review and unfortunately, I am unsure of where else to seek assistance besides here. Let me outline my current task: I am working on a user profile page that is designed to showcase users' comments. Users have t ...

Tips for eliminating the PHP form redirection issue

Having trouble with data insertion in MySQL and getting redirected to the PHP file after. Not ideal! Any suggestions on how I can display error or success messages within the same HTML file? index.html <form id="form" action="add_article.php" method=" ...

Adjust the opacity of a MeshBasicMaterial in real-time

<script type="importmap"> { "imports": { "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384c504a5d5d784e0816090e0a1608">[email p ...

How to Handle an Empty Route with a Trailing Slash in Backbone Routing?

While I am aware of the potential SEO issues that come with duplicate content, my project is not currently focused on that aspect. Looking at my backbone router configuration, here it is: routes: { "": "startOrder", "order/:orderNumber/:stepName" ...

What is the process for incorporating a personalized SVG icon into a fontawesome library stored locally (fontawesome-all.js)?

I am trying to incorporate a custom SVG icon into my local fontawesome library (fontawesome-all.js) that is stored in my project's assets folder. I followed the instructions given on https://fontawesome.com/get-started but I am struggling to understan ...

Eliminating Non-Breaking Spaces with the Click of a Button

Having some difficulty with the following Javascript code. I'm not very skilled in writing Javascript, so any assistance on adjusting it to replace any &nbsp; with a regular space would be greatly appreciated. Thank you function copyToClipboard( ...

Create a dynamic div element using Jquery that is generated based on text input

I am attempting to dynamically insert a div based on the text within the parent container. My HTML structure is as follows: <div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div> <div class="listing_detail ...

Assistance with utilizing Regular Expressions to extract the className from a React/JSX component

For instance, I have <img className='class' src='somelink' /> and my goal is to extract only the className='class'. I have already attempted using / className='.+'[ |>] while going through files in search of ...