jquery allows you to toggle the visibility of content

There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on the button should also change from "manual button" to "catalogus button" for easy navigation. Clicking the button again should reverse the visibility of the divs.

The current code implementation is not working as intended:

<script type="text/javascript">
$(document).ready(function(){   
    $('.manualOrderBox').hide().before('<a href="#" id="toggle-manualOrderBox" class="manualButton">manual order box</a>');
    $('a#toggle-manualOrderBox').click(function() {

        $('.manualOrderBox').slideToggle(1000);

        if($('.manualOrderBox').is(":visible")){
            $('.catalogusOrderBox').hide();
            $('.manualOrderBox').visible = false;
        }else{
        $('.manualOrderBox').visible = true;
        $('a#toggle-manualOrderBox').text('catalogus orderBox');
        $('.catalogusOrderBox').show();
        }
        return false;
    });

});
</script>

<div class="manualOrderBox">

To see this issue in action, visit https://jsfiddle.net/Lbot8a8b/.

javascriptjqueryhtmlcss

Answer №1

Please take a look at this Revised Demo

Snippet of HTML Code : 

<button class="changeDiv" id="catalogusOrderBox" value="manualOrderBox">Switch Div</button> 
<div class="manualOrderBox">
        manualbox greetings
</div>
    <div class="catalogusOrderBox" style="display:none">
       catalogus box greetings
</div>

JQuery Script :

    $(".changeDiv").click(function()
    {   
        $(".manualOrderBox").hide();
        $(".catalogusOrderBox").hide();
        id = this.id;
        val = $(".changeDiv").val();
        $("."+id).show();
        $(".changeDiv").val(id);
        $(".changeDiv").attr("id", val);
    });

to change the button text follow this Example

Answer №2

Here is a different solution:

$(document).ready(function () {
    var newButton = $('<button id="toggle-orderBox" class="orderButton">toggle order box</button>');
    var orderBox = $('.orderBox');
    var catalogusBox = $('.catalogusOrderBox');
    orderBox.slideUp({ duration: 0 }).slideDown({ duration: 0 }).before(newButton);
    catalogusBox.slideUp({ duration: 0 });
    newButton.text('show catalogus order box');
    newButton.click(function () {
        newButton.text(orderBox.is(':visible') ? 'toggle order box' : 'show catalogus order box');
        catalogusBox.stop(true).slideToggle(400);
        orderBox.stop(true).slideToggle(400);
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="orderBox">order box text here</div>
<div class="catalogusOrderBox">catalogus box text here</div>

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

Using Chart.js to display JSON data in a graphical format

I am facing an issue and need some help. I have gone through various tutorials and questions, but none of them seem to address my specific problem. When making an ajax request to my PHP file, I receive a JSON response like this (as seen in the console log) ...

javascriptjqueryjsonchart.js

Sending data with React using POST request

Currently in my React application, I have a form that includes fields for username and password (with plans to add "confirm password" as well). When submitting the form, I need it to send JSON data containing the email and password in its body. The passwo ...

javascriptnode.jsreactjspostaxios

Transmit information from the main directive to the subordinate directive

Hi everyone, I have a quick question.. I'm working on a directive that includes an ng-repeat and transclude, with several child directives inside it that need to inherit specific objects from each iteration... So far, I've only managed to achiev ...

javascriptangularjs

Having trouble with reactjs and typescript? Getting the error message that says "Type 'string' is not assignable to type 'never'"?

When trying to setState with componentDidMount after an axios request is completed, you may encounter the error message Type 'string' is not assignable to type 'never'. Below is the code snippet: import * as React from 'react&apos ...

javascriptreactjstypescript

Switching from jQuery to vanilla JavaScript, iterating through each HTML tag in a loop

Here is my current jQuery code that I am looking to convert into vanilla JavaScript. var elements = []; document.querySelectorAll('*:not(script, style, iframe)').forEach(function(element) { elements.push(element); }); I have tried using d ...

javascriptjqueryhtmlarraysdom

An Angular JS interceptor that verifies the response data comes back as HTML

In my current Angular JS project, I am working on implementing an interceptor to handle a specific response and redirect the user to another page. This is the code for my custom interceptor: App.factory('InterceptorService', ['$q', &ap ...

javascripthtmlangularjsintercept

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

cssangularjsng-class

Determining If a setInterval Function is the Sole Factor Preventing an App from Exiting

Is there a method to determine the number of tasks remaining for Node before it automatically exits because all tasks are completed? I am interested in utilizing setInterval but only while the application is still running other processes. I do not want t ...

javascriptnode.js

Explain the concept of paragraph spacing in Word, including how it is

When working with my ms word 2010 document, I often use the includetext-function to incorporate HTML content: { INCLUDETEXT "test.html" } Here is an example of the HTML code that I am trying to include: <html> <head> <meta http-equiv="Co ...

htmlcssms-wordparagraph

What strategies can I use to divide lengthy words in my Django application?

My username on the site is causing overflow outside of the content box, as shown here I tried adding h1, h2, h3, h4, h5, h6 { color: #44444; overflow-wrap: break-word;}, but it didn't work. Here is the code for the profile page: All CSS styles for ...

htmlcssdjango

Accessing PUT/POST/DELETE endpoints directly from the backend through the browser without the need for UI connectivity

How can PUT/POST/DELETE methods be implemented in NodeJS directly within the browser? router.put('/sync/:syncId', (req, res) => { res.send(JSON.stringify({ "status": 200, "error": false, "response": "HELL ...

javascriptnode.jsrestexpress

How can we transfer data using Routes in React applications?

In my React application, I have a datatable that opens an "Add New" page (a reusable form) when the user clicks on the corresponding button. This AddNew page reads form fields (employeeInputs) specified in App.js. import { employeeInputs } from "./formSour ...

javascriptreactjsreact-router

What are the best techniques for creating animations in AngularJS?

I've been trying to figure out how to animate in AngularJS by searching online, but I haven't found a perfect solution yet. html <span class="sb-arrow down" ng-click="hideSampleList($event)"></span> ...

javascriptangularjsanimationjquery-animatecss-animations

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

I'm currently working on a project that involves displaying data from a database in a table. To make the data paginated on the client side, I decided to use the bootstrap paginator library available at: Below is the code I'm using: In my header ...

javascriptphpjqueryhtmltwitter-bootstrap

Issue with Angular FormControl Pattern Validator failing to validate against regex pattern

My goal is to restrict a text input field to specific characters only. I am looking to allow: alphanumeric characters (a-z A-Z 0-9) 3 special characters (comma, dash, single quotation mark) : , - ' A few accented characters: à â ç è é ê î ô ...

javascripthtmlregexangularforms

Utilizing jQuery AJAX with the data type set as HTML

Hello, I have encountered an issue while using jQuery Ajax function with PHP. The problem lies in the fact that when setting the datatype to "html", my PHP variables are not being returned correctly. JavaScript $.ajax({ type: "POST", dataType: "html", ur ...

phpjqueryajax

Exploring the World of React Variables

Recently, I've been diving into the world of React and encountered some challenges while styling my components. Personally, I find it more organized to style within the same JavaScript file instead of having a separate one. However, I'm curious a ...

cssreactjs

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid

Tips for improving the loading speed of Ajax applications

Having an issue with the speed of loading AJAX pages on my main.php and ajx_receipt_sub_detail.php. Looking for suggestions to increase the loading speed of AJAX. Main.php <script src="scripts/jquery-1.11.0.min.js"></script> <script> f ...

jqueryajax

Enclosing floated elements within a parent div

Looking for a way to make a div wrap around a changing number of child elements without specifying a width for the parent? I've managed to get the content wrapping by floating both the child and parent elements, but I'm facing an issue when the ...

htmlcss