Updating a simple jQuery / CSS code

Question

I was hoping someone could help me out with this simple question: I’ve just started to learn jQuery and found a code to show hidden text after selecting an item. I’d like to update it so that:

a.) The selected item is bold

b.) I can add placeholder text instead of starting off with a blank hidden text field

I foolishly assumed I could solve a.) by using the :active property in css, but that only works as long as the link is clicked on. (As soon as you release the mouse button it’s gone.) Just like b.), this is probably only possible by using jQuery as well? If so, would be really great if you could show me how to solve it. :)

The codes: http://jsfiddle.net/KUtY5/1/

JS

 $(document).ready(function(){
    $("#nav a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $("#menu_container div").hide(); 
      $("#menu_container #menu_"+id[1]).show();
    });
});

CSS

#menu_container {
 width: 650px;
 height: auto;
 padding-left: 30px;
}
#menu_container div {
 display:none;
}

HTML

<div id='nav'>
    <a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>
</div>

<div id="menu_container">
    <div id="menu_apps">
    Content of the App Section Here
    </div>
    <div id="menu_soups">
    Content of the Soups Section Here
    </div>
    <div id="menu_entrees">
    Content of the Entrees Section Here
    </div>
</div>

you might consider this and let it do your heavy lifting sense you are already using jquery jqueryui.com/tabs — Bindrid
– Bindrid, Commented Jan 1, 2016 at 23:41

Zakaria Acharki · Accepted Answer · 2016-01-01 23:48:12Z

1

Updated fiddle

You can realize a) using a custom class bold for example and the following code :

CSS

.bold{ font-weight: bold;}

JS

 $(this).addClass('bold').siblings('a').removeClass('bold');

For b) I can't find any textfield in your code.

Hope this helps.

edited Jan 1, 2016 at 23:48

answered Jan 1, 2016 at 23:38

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

Comments

Tümer Koloğlu · Accepted Answer · 2016-01-01 23:46:02Z

0

I have added some extra lines to your code and you can check it from here http://jsfiddle.net/KUtY5/483/.

You bold like this

$("#nav a").css("font-weight", 400); // First you make them thin
$(this).css("font-weight", 800); // Than you make them bold

You put placeholder like this

<div id="placeholder">
  Placeholder
</div>
$("#placeholder").hide();

On the other hand I recommend you not to hide menu container. Rather hide the elements inside the menu_container. So you can put a plcaeholder in menu container and you can hide it.

answered Jan 1, 2016 at 23:46

Tümer Koloğlu

1138 bronze badges

2 Comments

TimVanGorp Over a year ago

Thank you so much for your time! Works great :)

Tümer Koloğlu Over a year ago

@TimVanGorp You're welcome :). If you can accept this as solution I would appreciate it :)

marblewraith · Accepted Answer · 2016-01-02 00:04:22Z

0

To figure this out 2 questions must be asked / solved

how do you normally make text bold on a page... css right?
where do you want those styles to be defined? There are 2 places:

a. You can define it inside the javascript.

b. You can define it inside the projects css through normal methods (inline, external, embedded).

What's the difference? If you define it inside the javascript the code is self-contained. What i mean by that is you can copy/paste the JS code from one project to the next and you don't need to worry about copying related styles from the stylesheets or other sources because it's all in the JQuery that you've written.

In contrast if you define it outside the javascript in the regular places the code may not be self-contained however some find it easier to manage in the scope of that particular project because all your css is contained in one place (external stylesheet typically).

If you want to take option a, see the .css() method

If you want to take option b, see the style manipulation (toggle class in particular)

Note the examples in the above references should get you 90% of the way to understanding it.

Some final words. Learn Jquery, but i advise you to stay away from it as much as possible because it implements DOM thrashing instead of DOM caching (sizzle engine).

This video series will briefly go into why Jquery sucks for performance in the first video and the rest of the series is about how to create modular vanilla JS.

JQuery goes back and searches the DOM every time you need to make a change that is what $.(*element*) is doing instead of just caching it.

The more nodes you have in the DOM the more processing power is used searching (because it has to go through the entire tree).

Then on top of that the more elements you have to make changes to (say if you use a css class selector) you have to add even more processing on top of that.

All this is fine if you're on a desktop, but what about a mobile platform? Where would you get all this processing power from?... It doesn't exist.

answered Jan 2, 2016 at 0:04

marblewraith

7785 silver badges16 bronze badges

2 Comments

TimVanGorp Over a year ago

Thank you so much for the helpful advice and the clear documentation Matthew, I really appreciate you taking the time to post this. Hope you have a wonderful new year :)

marblewraith Over a year ago

no problem, here's hoping you get on to vanilla JS as soon as possible.

Collectives™ on Stack Overflow

Updating a simple jQuery / CSS code

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related