Databases
StackOverflow2013
Postsdbo
POHow can I make this jQuery more succinct?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I make this jQuery more succinct?
    primarykey
    data
    text
    <p>I'm fairly new to jQuery and would like some pointers on my following block of jQuery code, I'm interested in writing better code. </p> <p>Basically, the code just slides content in from the left when you click on one of two menu items and then on a further click slides it out. I guess I'm trying to combine it into one code block rather than two functions.</p> <pre><code>$('#menu-item-91').click(function(e) { e.preventDefault(); //console.log("Clicked"); //$('.about').css('display','inherit').slideDown(3000); var sliding = $('.sliding'); var sliding1 = $('.sliding1'); if( sliding.css('display') == "none" &amp;&amp; sliding1.css('display') == "none" ) { //show it sliding.fadeIn(0); sliding.animate({"left": 0},800); }else if ( sliding.css('display') == "none" &amp;&amp; sliding1.css('display') == "block" ) { sliding1.animate({"left": -300},500 ); sliding1.delay(500).fadeOut(0); sliding.fadeIn(0); sliding.animate({"left": 0},800); } else { sliding.animate({"left": -300},500 ); sliding.delay(500).fadeOut(0); } }); $('#menu-item-17').click(function(e) { e.preventDefault(); //console.log("Clicked"); //$('.about').css('display','inherit').slideDown(3000); var sliding = $('.sliding1'); var sliding1 = $('.sliding'); if( sliding.css('display') == "none" &amp;&amp; sliding1.css('display') == "none" ) { //show it sliding.fadeIn(0); sliding.animate({"left": 0},800); }else if ( sliding.css('display') == "none" &amp;&amp; sliding1.css('display') == "block" ) { sliding1.animate({"left": -300},500 ); sliding1.delay(500).fadeOut(0); sliding.fadeIn(0); sliding.animate({"left": 0},800); } else { sliding.animate({"left": -300},500 ); sliding.delay(500).fadeOut(0); } }); </code></pre> <p>That's it! This is my first post so I hope I haven't broke any rules and someone out there can help me be better!</p> <p>Regards Tom</p> <p><em><strong>EDIT</em></strong></p> <p>Thanks Guys! Didn't want to mark an answer just yet as I think I probably missed out a bit of detail that's relevant for some of the answers.</p> <p>The two classes .sliding and .sliding1 are added to separate divs - one called portfolio and one called about. </p> <p>So the idea is that if you click the about menu item the about div slides in, then if you were to click the portfolio menu item then the about would slide out and portfolio would slide in. But if no items were displayed then the item you clicked would slide in.</p> <p>Hope this clarifies things, some of the answers just slide in the same content when either menu item was clicked.</p> <p>Thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTom
    1. USTom
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I make this jQuery more succinct?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I make this jQuery more succinct?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CODo both blocks do the same thing? If so then just put a class on each element and activate the jQuery on the class rather than the individual IDs. That would cut your code in half to start with.
      singulars
      1. POHow can I make this jQuery more succinct?
      1. USBilly Moat
    2. COI would cache **sliding jquery variables** outside your click callbacks so they are not created each time you make a click
      singulars
      1. POHow can I make this jQuery more succinct?
      1. USletiagoalves
    3. COLet me understand this, if any of the menu is clicked and none of the slider is visible, then the 'slider' is shown... Am I right?
      singulars
      1. POHow can I make this jQuery more succinct?
      1. USluckystars
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload