I am working on developing some navigation forms for my university projects. I encountered an issue where I selected the Book item, and the navigation was working fine. However, when I selected Child items and then clicked on the Organization item, the navigation details kept repeating. You can check out my code attached in jsfiddle here.
If you look at the image provided, there is a red color line showing the problem https://i.sstatic.net/TCqYs.jpg. Thank you.
It appears that there are multiple instances of the same ID in your code. Each ID attribute should be unique. I have replaced some of the duplicate IDs with numbers and removed unnecessary </div>
inputState -> inputState2 and inputState3
Please refer to the updated jsfiddle
EDIT: Replaced form content with Static text.
EDIT 2: Now functioning with all three forms.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-wrapper">
<div class="container-fluid">
...
// Remaining HTML code from the provided <div>
</div>
</div>Give this a try
Implement JQuery script along with JavaScript, then incorporate a select box for dropdown. Set the value of the select box dropdown in the main form div class. For instance:
<select> <option value="book">Book</option> </select><div class="book box"> Insert Form Here
Refer to the Link Below
Illustration - https://jsfiddle.net/DEVPIYUSH/98rb0xsf/
Hello and thank you for taking the time to read this. I am currently trying to implement express-validator in my project. It's working well as it blocks posts if, for example, the name input is empty. However, I'm struggling to display the error ...
Currently, I am attempting to implement this AngularJS example from a tutorial on Login Tutorial Example. Instead of storing the username and password as simple strings, I am trying to retrieve them from a local file. I understand that this may not be the ...
I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...
I am eager to incorporate a 3D avatar into my React portfolio. I recently followed this informative tutorial: React portfolio Specifically, I am looking to replace my current image in the header section with a 3D avatar using three.js, as illustrated in t ...
I am facing difficulties in passing the dynamically changing value of a computed method to my child component. I am creating a button component with different save states, but the button always remains stuck on one state and does not update according to th ...
Recently, I deleted and reinstalled my node_modules folder, and now I'm encountering a perplexing issue in the LayoutPropTypes.js file. Within node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js, I'm noticing that the variable var ...
Within my Angular2 application, I am facing an issue with displaying multiple instances of a child component - app-video-container - in a grid layout using inline-block. The parent component generates these instances using an ngFor loop but they appear sta ...
I am dealing with an association many-to-many between two tables, products and orders. In the pivot table, I store the product's id, quantity, and price. However, when fetching the product, I also require the product name which can only be retrieved f ...
I have been attempting to update the background image of a div using angular ng-style. Below is the code I am working with: <div class="cover-image" ng-style="{'background-image' : 'url({{data.image}})'}"></div> However, ...
I need assistance in designing an HTML layout with a fixed toolbar at the top and bottom, along with a single centered DIV that should be responsive when the user resizes the window both vertically and horizontally. I have attached a mockup/screenshot fo ...
I'm relatively new to utilizing $http and fetching data from various websites. My main query is, how can I convert JSONP into HTML? Specifically, when using $http to request the Atari Wikipedia page, the content is displayed with and HTML elements. ...
I have a layout with two columns, each containing two blocks Currently, the mobile order is: 1 2 3 4 But I want it to be: 3 1 2 4 I attempted to use CSS grid but I am unsure how to move block 3 out of column 2. Here's the code snippet: body { ...
I'm attempting to add hover effects to an image map within my Power Apps portal site using the code editor. However, when I include the script: <script type="text/javascript">$('img').mapster();</script> for the desire ...
When working with Express.js, I have a need to execute a task after sending a response. My main goal is to minimize the response time and send back the response immediately without waiting for the task results to be returned to the client. The task itself ...
Introducing my newest component, userRow: Let's take a closer look at userRow: export default function UserRow(props, {data}) { const style = styles(); const userList = data.map((row) => { return { name: row, details: row }; ...
I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...
I need to determine if today's date is the same as a specific date using moment.js. const today = moment(new Date()).format('DD/MM/YYYY') console.log(today) // "28/09/2021" const expiry = moment(new Date('2021/09/28')).format(&apos ...
Hello there! I am currently working on parsing an XML file within my web page using jQuery. Here is a snippet of the code: function loadCards(lang) { $.ajax({ type: "GET", url: 'data.xml', dataType: "xml", suc ...
I centered the images inside the "main-content" class, but I'm unsure if I did it correctly. Now, I also want to center the text, but using margin affects the images as well. Apologies for the messy code, I'm just a beginner. Below is the HTML5 ...
Having trouble starting my sapper project in production mode. When running npm run start, the following output appears on the console: niklas@Niklass-iMac project-name % npm run start > [email protected] start /Users/niklas/path/to/project > node _ ...