Working on a website where I need a navbar or anchor button to display content. Having an issue where all expanded items collapse when clicked for the first time, rather than following instructions as outlined in the JavaScript code.
Here is the code snippet:
Code snippet goes hereExample: View FIDDLE
If you want to easily toggle visibility using the show() and hide() functions, you can do so in the following manner:
$('#btn-1').click(function(e) {
$('#section-1').show("normal");
$('#section-2').hide("normal");
$('#section-3').hide("normal");
});
$('#btn-2').click(function(e) {
$('#section-1').hide("normal");
$('#section-2').show("normal");
$('#section-3').hide("normal");
});
$('#btn-3').click(function(e) {
$('#section-1').hide("normal");
$('#section-2').hide("normal");
$('#section-3').show("normal");
});<link href="http://cdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://cdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="http://cdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<a href="#sections" id="btn-1" class="btn btn-primary">Button 1</a>
<a href="#sections" id="btn-2" class="btn btn-primary">Button 2</a>
<a href="#sections" id="btn-3" class="btn btn-primary">Button 3</a>
<div id="section-1" class="panel">
Section 1 content here
</div>
<div id="section-2" class="panel">
Section 2 content here
</div>
<div id="section-3" class="panel">
Section 3 content here
</div>I've built a currency conversion app using next.js and it's running smoothly. However, I'm trying to implement a feature that allows users to easily swap between the From and To currencies. Here is the function code for swapping currencies: ...
Currently, I am diving into an ebook tutorial and have encountered a roadblock in a particular piece of code. The code is designed to take a username and password in JSON format through Insomnia or Postman, and it should return a login success cookie. Howe ...
I am facing an issue similar to the following: div.parent { height: 100px; padding: 20px; box-sizing: border-box; overflow: auto; } div.parent div.thing { height: 20px; width: 90%; border: 1px solid black; } <div class="parent"> ...
Is there a way to modify this code so that I can retrieve information from a MySQL database and display it in an HTML 5 form for editing? <td width="276"> <textarea cols="50" rows="5" name="reasons" value="<?php echo $rsns;?>" placeholder ...
I came across this code online and attempted to include a column with the "username" value. However, I am facing an issue where it is not displaying the username value from the database in the PHP table. <?php $no = 1; $tampil = mysql_query("SELE ...
I have come across a tutorial on creating a navigation menu with a logo positioned to the left. However, I now wish to incorporate a hamburger icon for mobile devices and I am unsure about the process. Despite my efforts to find a suitable tutorial onlin ...
In my django application, I am utilizing the check box control. Oddly enough, when using the standard check box control, I am able to retrieve the desired values in views.py. However, when attempting to use the bootstrap check box control, I encounter issu ...
In my Angular 7.x application, I have a component that calls a function from a service. This function makes a GET request to a backend endpoint and retrieves an array of users. Although I can view the data within the subscribe method (where console.log is ...
My goal is to display images randomly from my image file using PHP, which is working fine. However, I am facing an issue with spacing the images evenly to fill the width of my site. This is how it currently appears: https://i.stack.imgur.com/AzKTK.png I ...
Why does my Codeigniter ajax request work when JS is embedded internally, but not when I try to use it as an external JS file? View the code for the sample_ajax below: <html> <head> <title></title> <scrip ...
When using Microsoft Edge on Windows 10, all text appears with bold UTF-8 characters: https://i.sstatic.net/JfN0S.png I'm unsure of what the issue is. Is there a solution available? ...
After implementing a dfs search for an 8 puzzle game, I have encountered an issue where my stack keeps adding possible movements without decreasing to find an answer. It seems like the code is not working correctly as a dfs should be, and I'm seeking ...
I am facing a challenge with a 2D array structure that I have stored in an SQL database. The array looks like this: [1,[a,b,c,d,e],2,3] Upon retrieval from the database, it is presented as: 1,a,b,c,d,e,2,3 I am seeking advice on how to convert it back to ...
Having trouble with animations on some fbx models. When an animation lasts 20 seconds, the model remains stationary for 19 seconds and then suddenly moves within the last second or so. However, other fbx models animate correctly. The code used to run the a ...
When the textarea is empty, the "convert" and "clear value" buttons are inactive. They only become active when the textarea has a value. Manually clearing the value works as expected, but the issue arises when the "clear value" function empties the textar ...
Every time I try to use getDate() in my php file, I notice that the time returned is consistently 5 hours behind the system time. To address this issue, I have implemented a JavaScript solution to retrieve the time from the system instead. Below is the cod ...
As I develop a component to wrap the React Native TextInput in my app, I encounter an issue with the caret position resetting to 0 when toggling the secureTextEntry prop for password visibility. To address this problem, I implemented a workaround using a s ...
While loop through a group of HTML elements passed to a function, I am attempting to assign a class to specific elements based on a condition. However, after assigning the class, it seems like the content that is returned remains unchanged. I suspect there ...
Is there a potential issue with the method I'm attempting in this URL: The concept involves altering only the actions file when introducing a new action. One improvement I am considering is recursively merging the status passed from the actions with ...
Recently, I encountered an issue with rendering a PDF in Chrome while using an AJAX call with Angular. Strangely, the PDF would only show up in the browser if I resized the window or opened the console. Surprisingly, everything worked fine in Firefox. Jav ...