Changing CSS for specific "id" using "this" in jQuery

Question

My main goal is to have the user click on any "nav" class item and display a certain paragraph ID based on which nav class was clicked. I can add the .css to this post if needed but the main thing is each paragraph ID has "display" none".

Here's the "nav" items.

        <div id="home" class="nav">Home</div>
		<div id="store" class="nav">Store</div>

Here's my paragraph items which uses an ID of the nav ID's plus the number 1 which I figured was easiest when using jQuery as you'll see below in my jQuery code.

<p id="home1">Home text</p>
		<p id="store1">Store text</p>

This is my jQuery code which when using "alert(changeCSS)" shows the correct ID ("ID" plus the number 1).

	<script type="text/javascript">

			$(".nav").click(function() {

				var changeCSS = $(this).attr('id') + "1";

				$(changeCSS).css('display', 'block');

			});
		
	</script>

I'm new to jQuery and programming in general so it maybe something simple I hope. Let me know if you have any suggestions. Thanks!

Siah · Accepted Answer · 2017-01-29 05:08:51Z

2

You are not adding # for the id selector:

$('#' + changeCSS)

edited Jan 29, 2017 at 5:08

answered Jan 29, 2017 at 4:57

Siah

3612 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Siah Over a year ago

Uhum, so the downvoter thinks that there is no need for a # for ID selectors?

Casey Over a year ago

Oops haha. Thank you very much, that's it! And it wasn't me who downvoted fwiw

nonhocapito · Accepted Answer · 2017-01-29 05:04:46Z

0

Also consider the built-in jQuery effects .hide() and .show().

In your case it would be something like this:

            $(".nav").click(function(){

                var changeCSS = $(this).attr('id') + "1";

                $(changeCSS).show();

            });

This way you can easily control the speed at which your div appears or disappears:

$(changeCSS).hide(1000); //takes a second

answered Jan 29, 2017 at 5:04

nonhocapito

4761 gold badge5 silver badges22 bronze badges

2 Comments

Casey Over a year ago

Thanks for that! On a side note for you and anyone else, any suggestions on how to hide all paragraph text that wasn't clicked on?

nonhocapito Over a year ago

you can do it by using the .not() selector. For instance, clicking on an element adds a temporary class, for example '.clicked'. Then you hide everything; then you show just your div, using something like .not('clicked').show(). --please click my answer as useful, if it was )

n.y · Accepted Answer · 2017-01-29 05:31:45Z

0

$('.nav').click(function(event){
      var tag = $(event.target);
      var id= '#' + tag.attr('id') + '1';
      $(id).css('display','block')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>


<p id="home1" style="display:none">this is the home paragraph</p>
<p id="store1" style="display:none">this is the store paragraph</p>

answered Jan 29, 2017 at 5:31

n.y

3,5003 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Changing CSS for specific "id" using "this" in jQuery

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related