How can an accordion icon be added and list toggling be accomplished when HTML data is sourced from an API instead of a JSON response?

I have an API that sends HTML data as a response. The task at hand is to add accordion icons to the items in the list and enable list toggling using HTML, CSS, JavaScript, React, and MaterialUI. Unfortunately, I am limited in my options and cannot use JQuery for this purpose. Below is an example of the response data received from the API:

<ul data-ga-category="Header_Left_CategoryMenu" class="accordion cdpmenu">
    <li aria-label="Rakhi">
        <a data-ga-title="Rakhi" tabindex="0" href="javascript:void(0);" class="toggle top-link">Rakhi</a>
        <ul class="inner" data-ga-category="Header_Left_CategoryMenu_Rakhi">
            <li aria-label="For Recipient">
                <a data-ga-title="For Recipient" href="javascript:void(0)" class="toggle inner-link">For Recipient</a>
                <ul class="inner">
                    <li><a href="/rakhi/for-brother?promo=rakhimenu_hm">Brother</a></li>
                    <li><a href="/rakhi/for-bhaiya-bhabhi?promo=rakhimenu_hm">Bhaiya Bhabhi</a></li>
                    <li><a href="/kids-rakhi?promo=rakhimenu_hm">Kids</a></li>
                    <li><a href="/rakhi-gifts/for-sister?promo=rakhimenu_hm">Return Gifts for Sister</a></li>
                    <li><a href="/digital-gifts/raksha-bandhan?promo=rakhimenu_hm">Digital Gifts</a></li>
                </ul>
            </li>
            <li aria-label="By Sets">
                <a data-ga-title="By Sets" href="javascript:void(0)" class="toggle inner-link">By Sets</a>
                <ul class="inner">
                    <li><a href="/single-rakhi?promo=rakhimenu_hm">Single Rakhi</a></li>
                    <li><a href="/set-of-2-rakhi?promo=rakhimenu_hm">Set Of 2 Rakhi</a></li>
                    <li><a href="/set-of-3-rakhi?promo=rakhimenu_hm">Set Of 3 Rakhi</a></li>
                    <li><a href="/set-of-4-rakhi?promo=rakhimenu_hm">Set Of 4 Rakhi</a></li>
                    <li><a href="/set-of-5-rakhi?promo=rakhimenu_hm">Set Of 5 Rakhi</a></li>
                    <li><a href="/family-rakhi-set?promo=rakhimenu_hm">Family Rakhi Set</a></li>
                    <li><a href="/rakhi-sets?promo=rakhimenu_hm">Rakhi Sets</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li aria-label="Cakes">
        <a data-ga-title="Cakes" tabindex="1" href="javascript:void(0);" class="toggle top-link">Cakes</a>
        <ul class="inner" data-ga-category="Header_Left_CategoryMenu_Cakes">
            <li aria-label="By Types">
                <a data-ga-title="By Types" href="javascript:void(0)" class="toggle inner-link">By Types</a>
                <ul class="inner">
                    <li><a data-sbnavmenu="Cakes~By Types~Bestseller Cakes~1" href="/cakes-bestsellers?promo=cakesmenu_hm">Bestseller Cakes</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
https://i.sstatic.net/0E3b2.png
javascripthtmlcssreactjsmaterial-ui

Answer №1

Do you happen to be requesting that specific html snippet via a get request? I'm just speculating here since the details were not provided. However, if you are indeed doing so, you have the flexibility to make modifications within this block of code (assuming axios is used, but any other request method will work equally well)

const adjustHtml = (html) => {
  return html.map((h) => {// code to customize your html snippet goes here}
};

axios.get('/the_location_where_html_is_fetched')
  .then((response) => {
    // utilizing react hooks
    setAnything(modifyHtml(response.data));
  })
  .catch(() => {}) // implement error handling as needed

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

Difficulty encountered when attempting to extract a username with multiple spaces using the .split() method in Discord.js with NodeJS

Currently, I am enhancing a feature in my Discord Bot that fetches the League of Legends statistics of a player by using the command !lolid [enter_username_here] in a Discord chat room. The function works smoothly for usernames with just one word; however, ...

javascriptnode.jsdiscord.js

Can someone explain why my Laravel route is consistently showing a 404 error?

Currently, I am attempting to perform an AJAX request for a form post type. However, the PHP parse script I am trying to send the data to is returning a 404 error as observed through Chrome developer tools. Below is the code snippet: <script type="text ...

javascriptphpajaxlaravelrequest

Substitute for SendKeys() in Angular JS web pages using Selenium

Currently, I am utilizing selenium automation to streamline the processes of a third-party website. To input data into form fields, I have been employing the SendKeys() method. While this method is functional, it's time-consuming as there are numerous ...

javascriptc#seleniumselenium-webdriver

Getting rid of the <br> tag as well as the linked <span> element

I've been experimenting with creating dynamic forms. My latest project involves a text box, an 'Add' button, and a div. The idea is that whenever a user types something into the text box and clicks the Add button, that value should appear in ...

javascriptjqueryhtmlcss

Different ways to position 3 images side by side and ensure they are centered on the

I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to ...

htmlcss

Tips for preventing a page from automatically scrolling to the top after submitting a form

Recently, I set up a form where users can input values. The form is set to submit either on change or when the user hits enter, depending on which value they want to update. However, after the values are submitted, the page automatically jumps back to the ...

javascriptphpjqueryhtmlforms

Implementing automatic selection mode in Kendo MVC grid

Seeking to modify the SelectionMode of a Kendo MVC Grid, I aim to switch from single to multiple using Javascript or JQuery upon checkbox selection, and revert back when the checkbox is unchecked. Is this feasible? Additionally, I am successfully binding a ...

javascriptjqueryasp.net-mvckendo-uigrid

Employing the Context API to simulate the functionality of useSelector and useDispatch in redux version 5

I am currently working on a React project that requires me to use React Redux v5, which unfortunately does not include the useDispatch and useSelector hooks. However, I really need these hooks (or something similar) in my application. To work around this ...

reactjsreduxreact-reduxreselect

What is the best way to incorporate a wav file across all browsers using Django?

I am having trouble playing a wav file in Django. I tried using the audio tag and it worked fine in Chrome, but doesn't work in Firefox. When I created an HTML file in Apache, it worked with Firefox. However, I can't figure out why it's not ...

htmldjangotemplatesaudio

Is it possible to include a base url for imports in React JS?

Conventional method for adding imports: import Sample from ‘../../../components/signup’ I want to simplify imports by removing the front dots and slashes: import Component from ‘components/signup’ Is there a way to set a base URL for imports to ...

javascriptreactjsangularjsvue.js

Even when the outcome is not what was anticipated, mocha chai still manages to ace the examination

When testing my REST API response with mocha, chai, and express, I set the expected status to 201 but unexpectedly got a passing test result it('janus post', () => { request('https://***') .post('/***') .attach(&a ...

javascriptnode.jsexpressmocha.jschai

Looking for a new slider option to replace the traditional Conveyor belt slideshow?

I have successfully used the Conveyor belt slideshow script from http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm. Now, I am looking to find another script that works similar to this one. Does anyone have any recommendations for a tool that ...

javascriptjquery

PHP processing and converting to a string output

I have a PHP page (content.php) that includes plain HTML and content accessed via PHP variables <html> <head> </head> <body> <h1><?php echo $title; ?></h1> </body> </html> ...

phphtml

Custom property fallback values do not function properly with CSS Variables

I defined a custom property in the :root selector as shown below, but for some reason my color is not rendering correctly. Can someone please help me identify what I am doing wrong? :root { --color-primary: var(--color-primary, #ffc107); } body { ...

htmlcss

Only implement $(document).on(...) for every JQuery request

As someone new to Jquery, I'm facing challenges in grasping its functionality. Specifically, my struggle lies in setting up an event listener on an i element with the class of .dataPickerIcon, which should respond to a click by inserting more HTML usi ...

javascriptjqueryhtml

What causes the appearance of a slight space between a child element positioned absolutely and its parent element with borders? All the margins, padding, and positions have been assigned a value of

I have encountered a peculiar issue that I managed to recreate in a simplified version. In my scenario, the parent element has the CSS property position: relative, while the child element with the ::after pseudo-element has position: absolute and all direc ...

htmlcsscss-position

The disabled property of React Material-UI button is malfunctioning

I am having trouble getting the [disabled] property to work on my material-ui button. The props are coming from the parent component and mostly consist of strings. The deck is an array of cards. Here is the code snippet : import React from "react&qu ...

reactjsmaterial-ui

Merging pertinent information from separate arrays

Seeking assistance in merging data from two distinct arrays with varying structures. Data is acquired via API, the initial request: [ { "category_id": "12345", "category_name": "itemgroup 1", "cat ...

javascriptnode.jsarrayssortingaxios

Utilizing PHP configurations in JavaScript with AJAX for JSON implementation

Trying to have a config.inc.php file shared between PHP and JavaScript seems to work, but when using ajax, the "error-function" is always triggered. Is there a way to successfully share the config file with working ajax implementation? This is being utili ...

javascriptphpjqueryajaxconfig

Unlocking the power of asynchronous methods within the useEffect() hook

When attempting to fetch an API within a useEffect(), I encountered the following error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Here is the code snippet that caused the error: -API being fetched: ex ...

node.jsreactjstypescriptnext.js