Read more opens 1st one all the time

Question

I've a page with about 10 short articles.

Each of them as a "Read More" button which when pressed displays hidden text

The issues I have at the moment is when I press the "Read More" on any of the 10 button it shows the 1st articles hidden content and not the selected one.

I think I need to set a unique ID to each article.. and the read more button be linked to it.. But I don't know how to set it.

I looked at this but couldn't get it working how to give a div tag a unique id using javascript

var WidgetContentHideDisplay = {

init:function() {
   if ($('#content-display-hide').size() == 0) return;
    $('.triggerable').click(function(e){
        var element_id = $(this).attr('rel');
        var element = $('#'+element_id);
        element.toggle();
        if (element.is(':visible')) {
            $('.readmore').hide();
        } else {
            $('.readmore').show();
        }
       return false;
   });
}

}

var div = documentElemnt("div");
div.id = "div_" + new Date().gettime().toString;

$(document).ready(function(){ WidgetContentHideDisplay.init(); });

OP Edit: Sorry, the original code wasn't in caps. I kept getting errors when trying to post, so I copied the code into Dreamweaver and it made it all caps for some reason.

Is your caps-lock key broken and stuck on? For the sake of everyone on SO, I've reformatted your code. In the future, for the sake of future coworkers and question-answerers, please use a more readable coding style. — cincodenada, Apr 22 '14 at 08:34

score 1 · Answer 1 · answered Apr 22 '14 at 08:43

Instead of selecting the element to toggle with an ID (i.e. $('#'+ELEMENT_ID)) you could setup a class for your item and use the class selection (e.g. $('.DETAILED-ARTICLE)') to select the child (or the brother, etc. depending how you built the HTML page).

In theory each ID should point to a single element but each class can be put to as many elements as you want.

score 0 · Answer 2 · answered Apr 22 '14 at 08:43

If you're getting errors, read the errors and see what they are. Off of a quick read of your code, here are a couple things I noticed that will probably cause issues:

"documentElemnt" is misspelled, which will render it useless. Also, documentElement is a read-only property, not a function like you're using it.
toString is a function, not a property, without the parentheses (.toString()) it isn't going to function like you want it to.

Run the code, look at the errors in the console, and fix them. That's where you start.

Read more opens 1st one all the time

2 Answers2