Home » Show Hide Div Based on Dropdown Selection Using HTML,CSS & JQUERY

Show Hide Div Based on Dropdown Selection Using HTML,CSS & JQUERY

by admin
Show/Hide Div Based on Dropdown Selection Using HTML,CSS & JQUERY

Hello friends, how are you guys, I hope you will be good, you people must have seen on many websites that if you click on a link, button, image, or any text, then its data is shown, you show it in a way It can also be called Hide Data. Let me give you another example, you must have seen the pricing plans on many of our websites, they have monthly and yearly plans, so when you click on the button of monthly plans, then monthly plans are shown, and when you click on the yearly plans. If you do, then the plans of the year are shown, in the same way, I am going to hide the data in the show, but here I will use the select dropdown (when the value of the select dropdown changes, then I will show and hide the data). I am going to do this with the help of HTML, CSS, and jQuery.

I am sure that you will like my article and this video very much and this article is going to be very interesting because it will be easily integrated into any website and its code is also small so no problem will come and you can use it. You can also use it in your project.

I have given the code below, you can copy it. For this you will need three files index.html, style.css, and script.js, you have to create these three files. In which the complete code of HTML will come in the index.html file. The style.css file will contain the CSS of the complete design and the script.js file will contain the code of the jQuery, Javascript.

And if you want to copy the whole code in just one file, then you have to do internal styling and internal script for that. That is, before the end of the head tag, the style code has to be written by creating the style tag and writing it. And write the code of jQuery by making a script tag at the end of the body and writing it inside it.

You might also like this video

index.html In this file I have taken a class named wrapper, inside it I have taken a class named menu in which I have taken select dropdown and another class named content which contains the data of profile i.e. when the select option will change then this content hide There will be shows whose structure and code you can see below.

In the select dropdown, I added the value and I will use this value as the Id in the divs named Data inside the content so that the value of the dropdown matches the Id of the div named Data. Can get it done

style.css This file will contain the CSS of the complete design, in which I have given style to the select dropdown (like border, border-radius, box-shadow, custom arrow, and style of font) after that set the data content. The div named Data has been given a border and background color has been given and there are many other properties which you can see below.

script.js In this file, I have put the code of complete jquery. In which I have taken the function of on change( $(“#name”).on(‘change’, function() ), I have got the value of dropdown inside it and matched it with the id which we have given in the class named data, if it matches then the data of that id will be shown and if not match If so, that data will not be visible. In this, I have hidden the div named data in the beginning.

Apart from this, you can also add all such code to the index.html file, for this you do not need to create any other file. In this, you have to add the code of CSS style inside the tag named style before the end of the head tag in index.html. After that, the code of jquery is to be added inside the script tag before the end of the body.

I want to tell you later that in this we have used the function and code of jquery, so we will need a jquery link(cdnjs or code.jquery) and you have to add that link above the script tag which we had made to write the code of jquery on top of it.

Related Articles

Leave a Comment