CODEWITHSUNDEEP
javascriptjquery
Jeffrey Shain
Jeffrey Shain

Reputation: 65

WEIRD: jquery .show and .hide not responding or changing css of corresponding div

Sample Code of my error

So as you can see in the above example, next to where it says "Disclaimer Question111", there is an expand/contract link. The script works halfway, in that the text change occurs, but it does not change the display css for the div its anchored to.

Any idea why? I don't see any page errors.

The code that triggers this is in my site.js file but i pulled it out here so you can see:

    $('.accordion-trigger-settings').click(function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Collapse Settings');
}
else
{
$(target).hide();
$(this).text('Expand Settings');
}
return false;
});

It applies to this block:

<a href="#accordion-season5160" class="accordion-trigger-settings">Expand View</a>
                                <div class="padding5"></div> 
                                <div class="accordionContent" id="accordion-season5160">
                                    <textarea  name="str_disclaimer_header5160" id="str_disclaimer_header5160"></textarea>
                                </div>

Upvotes: 0

Views: 150

Answers (2)

Vadim
Vadim

Reputation: 8789

Actually you have two <div id="accordion-season5160"...> on the page. One of them is hidden (inside hidden <div class="hide_div">). You can find them both using console:

document.querySelectorAll('#accordion-season5160')

You will see both of them. To see the element you can right click on it in the console and click 'Reveal in elements panel' (in Chrome)

The best way to solve this issue is to make ids unique. However you can try a quick way to solve the issue that does not require uniqueness of ids:

Replace

var target=$(this).attr('href');

with

var target=this.nextElementSibling.nextElementSibling;

JS Bin http://jsbin.com/itucop/1/edit

Upvotes: 1

cortex
cortex

Reputation: 5206

Using the Chrome web inspector I see you have two elements with id accordion-season5160. So, the text is changing because it applies to this but the show() method is modifying (showing/hiding) the first element with id accordion-season5160.

Make sure the id is unique.

See the image!

enter image description here

Hope it helps!

Upvotes: 3

Related Questions