CODEWITHSUNDEEP
jqueryrefactoring
chell
chell

Reputation: 7866

How can I refactor this jquery code for a NOOB

I have the following code that I can't seem to refactor:

    //opens some drop downs
    $('#proofreading').mouseover(function(){
                $('.proofreading .accordion-body').collapse('show');
    });


    $('#edit').mouseover(function(){
                $('.edit .accordion-body').collapse('show');
    });


    $('#on_time').mouseover(function(){
                $('.on_time .accordion-body').collapse('show');
    });

Here is the code in the html:

<div class='content-more'>
<br>
<span id='proofreading'>
Read More...
</span>
</div>
<div class='accordion proofreading'>
<div class='accordion-group'>
<div class='accordion-body collapse'>
<div class='accordion-inner'>
<p class='content-desc'>
<br>
When your work is proofread at EAPI we will go over your text word by word, line by line correcting the spelling, punctuation, grammar, terminology, jargon, and semantics.  As a result, your writing will be clear, correct, concise, comprehensible, and consistent: the <b>EAPI 5C standard</b>.
</p>
</div>
<br>
<span class='content-more close-accordion'>
close
</span>
</div>
</div>
</div>

<div class='content-more'>
<br>
<span id='edit'>
read more...
</span>
</div>
<div class='accordion edit'>
<div class='accordion-group'>
<div class='accordion-body collapse'>
<div class='accordion-inner'>
<p class='content-desc'>
<br>
When your work is edited at EAPI we will check and improve the formatting, style and accuracy of the text without altering the intended meaning.
</p>
<span class='content-more close-accordion'>
close
</span>
</div>
</div>
</div>

<div class='content-more'>
<br>
<span id='on_time'>
Read more...
</span>
</div>
<div class='accordion on_time'>
<div class='accordion-group'>
<div class='accordion-body collapse'>
<div class='accordion-inner'>
<p class='content-desc'>
<br>
When your work is proofread at EAPI we will go over your text word by word, line by line correcting the spelling, punctuation, grammar, terminology, jargon, and semantics.  As a result, your writing will be clear, correct, concise, comprehensible, and consistent: the <b>EAPI 5C standard</b>.
</p>
</div>
<br>
<span class='content-more close-accordion'>
close
</span>
</div>
</div>
</div>

How can I refactor the code so I don't need the id's and can just use a class as well as reduce the need for three jquery statements.

Upvotes: 0

Views: 56

Answers (1)

Barmar
Barmar

Reputation: 780798

Add class="accordion-header' to the proofreading, edit, and on_time DIVs. Then:

$(".accordion-header").mouseover(function() {
    $('.' + this.id + ' .accordion-body').collapse('show');
});

Upvotes: 1

Related Questions