Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show/hide content with specific class using jquery

Tags:

jquery

I'am new to jquery and maybe this is a stupid question but I have searched for an answer just about everywhere without finding one. So, here we go:

I want to show different content depending on what option I select in a drop down form. As I have learnt here on StackOverflow, you ca use the change function to do this:

Example:

<script type="text/javascript">

$(document).ready(function() {
$('#myselector').change(function(){
  $('.statecontent').hide();
  $('#' + $(this).val()).show();    
});
});

</script>

 <select id="myselector">
 <option value="state1"></option><br />
 <option value="state2"></option><br />
 <option value="state3"></option><br />
 </select>

<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div><br     />
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div><br />
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div><br />

This code will alove me to show content thats inside the different divs depending on what 'state' I choose in the drop down. But how do I connect the values of the drop down to a specific class instead of an id. The problem is of course that I want to show several divs that share a common class when i select a state in the drop down.

I would very much appreciate if anyone could point me in the right direction.

Paul

like image 815
user1009453 Avatar asked Oct 23 '11 11:10

user1009453


People also ask

How would you hide an div element with specific class in jQuery?

hasClass('status-10')) { $('. isHereSince'). hide(); } });

How do you create hide and show in jQuery?

hide(speed,callback); $(selector). show(speed,callback); The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.

How do we hide the content in jQuery?

jQuery hide() MethodThe hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.

How do I toggle Show hide in jQuery?

The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.


1 Answers

Read a jQuery doc about selectors. $("#someId") selects the element havig someId as id. $(".someClass") selects the elements having someClass as class. It uses the CSS3 notation. That's the heart of jQuery.

like image 100
JB Nizet Avatar answered Sep 24 '22 05:09

JB Nizet