[Solved] Click event doesnt work on first click

Ask the community
,
1

I have an events data set linked to a repeater that shows Event Image, Date, and title. Because some of the descriptions are so long I set the description text box to collapsed on load. I then added an onclick event for “see description” and “close description” to expand the description text box. (These also hide or show depending on the current state: see click hides on opening, close click is hidden on page load, etc.)

Everything works great except the click event doesnt work on the first click. I have tried this with both buttons and text and it always requires two-clicks the first time. It does work once after you have opened and closed the text box at least one time. What am I doing wrong?

Any help would be greatly appreciated.

$w.onReady(function () {
    $w('#eventdescription').collapse();
    $w('#close').hide();
});

export function see_click_1(event) {
 let $item = $w.at(event.context);
 
 if ($item("#eventdescription").collapsed) {
        $item("#eventdescription").expand();
        $item('#see').hide();
        $item('#close').show();
 
    } else {
        $item("#eventdescription").collapse();
        $item('#see').show();
        $item('#close').hide();// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
}
}

export function close_click(event) {

let $item = $w.at(event.context);
 
 if ($item("#eventdescription").collapsed) {
        $item("#eventdescription").expand();
        $item('#see').hide();
        $item('#close').show();
 
    } else {
        $item("#eventdescription").collapse();
        $item('#see').show();
        $item('#close').hide();
    }   // Add your code for this event here:   // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
}
2

Anyone?

3

Try to do it this way…

var REPEATER = "repeater1" //<<<---- ID of your repeater here.
var BUTTON_ID = "myButton" //<<<---- ID of used button here (just one button needed!)


$w.onReady(function () {
    $w('#eventdescription').collapse();
    $w('#close').hide();

    $w("#"+REPEATER).onItemReady( ($item, itemData, index) => {
       console.log("ITEM-DATA: ", itemData)
       console.log("ITEM-INDEX: ", index)

       $item("#"+BUTTON_ID).onClick(()=>{
          if ($item("#eventdescription").collapsed) {
                $item("#eventdescription").expand()
                $item("#btnOpenClose").label = "CLOSE"
          }
          else {
              $item("#eventdescription").collapse()
              $item("#btnOpenClose").label = "OPEN"
         }
      })
   });
});
4

@russian-dima works perfect! Cant thank you enough for the help. Totally made my day.

5

@arctypecreativedesig
No problem :wink: