Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Show and hide div containing text when 2 buttons are click

Featured Replies

Hi everyone 

 

im trying to show and hide(toggle)  a div containing text  when 2 buttons are pressed.. e.g.

 

if your going on the london underground and you select a route going from victoria to bond street .. you click the button called victoria and then click the button called bond street, it needs to display a div which contains the full route on the webpage.. im asking if anyone knows how to do this as im really struggling with this soo much

 

regards

 

zed

Use javascript.

in your ready function just set up a call so when both buttons are clicked you show a hidden div.

But why are you trying to replicate something that is already available on many websites and apps?

  • Author

Ive been given a task for my university project to make a clickable map-based journey planner for underground trains .. hence the buttons being stations  and needing to click 2 buttons also i know that i need to use javascript im asking how would i create a function which allows the user to click 2 buttons and display..

 

and because its a clickable journey planner each button would need to be used for mutiple routes which people would travel on  e.g. 

 

 Victoria to bond street

victoria to oxford circus 

embankment to victoria 

 

etc

 

 @fisicx

Edited by CyberZed404

What you have been tasked to do isn’t simple. You first asked about this months ago. Why didn’t you take a course in javascript as suggested?

For me to teach you how to do this will take hours of my time. If you are prepared to pay I don’t mind helping.

But one more question. What course are to taking that requires you to know how to code?

To provide any meaningful answer we would need to see the website. It all depends on how it is structured and how you are generating the routes.

Are you using the api as you wanted?

The point in having this assigned to you as part of university is to implement it yourself. Even if someone could write it here, you would get very stuck trying to explain the code out if you were required to.

Multiple journeys could be plotted as an array of objects. This could then be used to plot onto a map using the latitude and longitude of each location.

[
	{
		destination: 'Victoria',
		coordinates: {
			lat: '52.621780',
			lng: '-1.113930'
		}
	},
	{
		destination: 'Oxford',
		coordinates: {
			lat: '51.514960',
			lng: '-0.144460'
		}
	}
]

To actually plot these when you click, you need to store the coordinates so that you can query against a service like https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

I highly recommend you take the time to learn JS at even a fundamental level, or you will really struggle to understand any of this. Some resources that may help are (in order):

https://frontendmasters.com/bootcamp
https://frontendmasters.com/workshops/js-fundamentals-to-functional/ (paid with free trial)
https://javascript30.com

If you go through each of these in full, you will have a significantly better understanding of Javascript and programming in general.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.