How to do Design for all state of india on the web page

Question

Hi I want to shaow all the state of india on the webpage.i have somthing example for it please help me.how i can do the design like this

Madhanmohan Devarajan · Answer

.container { width:100%; //border:1px solid #d3d3d3; } .container div { width:100%; } .container .header { border-top-style: solid; border-top-width:1px; border-top-color:black; border-bottom-width:1px; border-bottom-color:grey; border-bottom-style:solid; width: 200px; border-right-style:solid; border-right-color:white; border-right-width:10px; //background-color:#d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; } .container .content { display: none; padding : 5px; } $(".header").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function () { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function () { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); Tamilnadu Chennai. Madurai. Trichy. Coimbatore. Andhra Pradesh Nellore. Vizag. Warangal. Hyderabad. Note: Please mark as accepted answer, if the above answer is useful for you.

Madhanmohan Devarajan · Answer

Just you want to show all these states in india within a web page. Is that you are looking for? If yes, then create a table as shown below in the HTML or ASPX page. Repeat the and elements for all other states. .tdStyle { border-top-style: solid; border-top-width:1px; border-top-color:black; border-bottom-width:1px; border-bottom-color:grey; border-bottom-style:solid; width: 200px; border-right-style:solid; border-right-color:white; border-right-width:10px; } Andaman and Nicobar Islands Hariyana Nagaland Andhra Pradesh Himachala Pradesh Odisha Note: Please mark as accepted answer, if the above answer is useful for you.

Madhanmohan Devarajan · Answer

Have attached the working copy of the HTML, CSS and jQuery. Please use the attached HTML, Make sure that you are not missing any HTML tags while copying. Note: Please accept this answer, If it helps you to resolve your issue.

Yuvi Sharma · Answer

Madhanmohan Devarajan Sir, I have done those things now i'm getting this type of the output but there is some problem in my script language. becouse when i'm clicking on the any of the state i'm unable to get the cities. please check my code and help me out of this. $(".header").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(50, function () { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function () { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); Assam Chennai. Madurai. Trichy. Coimbatore. Assam Chennai. Madurai. Trichy. Coimbatore. Assam Chennai. Madurai. Trichy. Coimbatore. Assam Chennai. Madurai. Trichy. Coimbatore. Assam Chennai. Madurai. Trichy. Coimbatore. Output Screen:

Yuvi Sharma · Answer

i'm facing this issue i want details in horizontal and after the some details i want to brake the line.want details in the below like previous screenshoot.

Yuvi Sharma · Answer

Thank you so much Sir. aslo can you help me with also that.when user click on state he can get the cities in each state.

Yuvi Sharma · Answer

no sir nothing will happen after clicking on any state.

Madhanmohan Devarajan · Answer

What should happen if the user clicks on any state? Do you want to show the cities in each state?

How to do Design for all state of india on the web page

Answers (8)