In one of my web pages, there is a div that I'll refer to as div1.
Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let's call it Link2; clicking on Link2 will then replace div2 back with div1.
I am looking for a way to achieve this functionality using javascript/angularjs/html/css.
Without specific requirements provided, I will address this question in a general manner.
I have utilized vanilla Javascript to interact with the DOM using event listeners. Feel free to adapt my approach as needed.
The task can be achieved by toggling the display property of the other div element.
Execute the code below, focusing on the Javascript implementation:
let div1 = document.getElementById('div1')
let div2 = document.getElementById('div2')
let link1 = document.getElementById('link1')
let link2 = document.getElementById('link2')
link1.addEventListener("click", function () {
div1.style.display = "none"
div2.style.display = "block"
})
link2.addEventListener("click", function () {
div2.style.display = "none"
div1.style.display = "block"
})div {
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
position: absolute;
}
#div2 {
display: none;
background-color: red;
}
#div1 {
display: block;
background-color: green;
}<div id="div1">
<a id="link1" href="#">Link 1</a>
</div>
<div id="div2">
<a id="link2" href="#">Link 2</a>
</div>If you're looking to achieve this with angularJS, a simple method is to utilize ng-if and ng-click within anchor tags. Remember to include an href attribute for the link to be displayed properly. Here's an example code snippet:
<div>
<div ng-if="show1==true">
<a href ng-click="show()">Show 2</a>
</div>
<div ng-if="show2==true">
<a href ng-click="show()">Show 1</a>
</div>
</div>
For the script section:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.show1 = true;
$scope.show2 = false;
$scope.show = function()
{
if ($scope.show1 == true)
{
$scope.show1 = false;
$scope.show2 = true;
}
else
{
$scope.show2 = false;
$scope.show1 = true;
}
}
});
This is just one approach to achieve this functionality using angularJS.
This method is a simple solution using ng-if and ng-click for toggling functionality. Check out this example on JSFiddle
Here's the HTML code:
<div ng-app="myModule">
<div ng-controller="myCtrl">
<div ng-if="showDiv1" ng-click="toggleDivs()">div1</div>
<div ng-if="!showDiv1" ng-click="toggleDivs()">div2</div>
</div>
</div>And here's the Angular module and controller setup:
angular.module('myModule', [])
.controller('myCtrl', function ($scope) {
$scope.showDiv1 = true;
$scope.toggleDivs = function(){
$scope.showDiv1 = !$scope.showDiv1
};
});
Exploring the idea of utilizing React to efficiently fetch data using useEffect correctly. Currently facing a situation where data fetching is occurring constantly instead of just once and updating only when there is an input for the date period (triggeri ...
Suppose I have a custom type for a Map as follows: type MyCustomMap = Map<string, number>; Is there any way to add an index signature to this type so that I can set key-value pairs after initializing it? I have been able to achieve this with types ...
Currently, I am facing a challenge in building an MVC controller in TypeScript as I am struggling to make my async method return a deferred promise. Here is the signature of my function: static async GetMatches(input: string, loc?: LatLng):JQueryPromise& ...
I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice wo ...
Can anyone help me troubleshoot the issue with the following function? I am receiving this error message: SQL compilation error: syntax error line 1 at position 0 unexpected 'function'. Should I be using JSON Script or Javascript for this? func ...
When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...
I recently implemented a table using Vuetify in my project. The table is now split into two components - the Table component and the Row component. My challenge is how to handle the same function, this.selected = !this.selected!, when dealing with 2 differ ...
Currently, I am working with React and utilizing Material UI to create a modal. The modal is rendered as part of the body of the code, placed at the bottom of the page. Its visibility is controlled by the state; if it's open or closed. However, I&apos ...
My challenge is with this particular textbox: <input type="text" autocomplete="off" required="required" id="bar" name="bar" class="form-control" placeholder="Barcode"> Also, there's a button in the mix: <button type="button" style="float:r ...
I am currently facing an issue with displaying error messages on my "contact me" form. Although I have successfully implemented validation, I am struggling to comprehend how the errorPlacement function should be utilized. Could someone provide me with a ...
I've been encountering an issue while trying to run the JavaScript client for the Tumblr API from their Github repository. The error message I keep getting is "require not defined" which has led me on a hunt across various forums and websites, includi ...
Every time I try to run gatsby build, an error pops up: failed Building static HTML for pages - 10.179s ERROR #95313 Building static HTML failed Refer to our documentation page for more details on this issue: https://gatsby.dev/debug-html 343 | ...
On my website, I have implemented a CodeMirror text area from . <form><textarea id="code" name="code" codemirror-type='lineNumbers: false, styleActiveLine: true, matchBrackets: true;'>CODE HERE</textarea></form> I added ...
Is it possible to send both a file and body with the POST request below in axios? axios.post("http://localhost:3000/upload", formData) How can I include something in the body:{} section as well? Server response: files: { myFile: { nam ...
In order to automatically load content into a div using innerHTML, the PHP file must be retrieved and the div updated with its content. Within this div is another one labeled "tweet" which displays actual tweets based on a specific hashtag provided through ...
Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...
In the Erm component, the function setErm is undefined even though it is received by the App component. When passing something like something='foo', the ERM component receives it but not setErm={props.setErm} const App = props => { console. ...
I have a database table with latitude, longitude, and hotel locations. I want to create a feature that will show hotels near a specific point defined by latitude and longitude. Code Snippet function findNearbyHotels() { $this->lo ...
Imagine having a custom directive: angular.module('foo').directive('myDir', function () { return { restrict: 'E', link: function (scope) { var watcher = scope.$watch('foo, function () {}); scope.$on ...
Is there a way to have the Material UI react Button component behave like a Link component from react-router-dom while preserving its original style? Essentially, how can I change the route on click? import Button from '@material-ui/core/Button' ...