0

I have a small program that includes a table with rows, each row contains an 'i' image. When you click the 'i' next to the element, it will open a more detailed view of the element, when you click the 'i' again of the SAME element, it should close the more detailed view (your generic toggle function). However, I need to have additional functionality that when you click the 'i' of a different element, it doesn't close the detailed view and just updates the right side. This part I was able to get working (first function). What I am having trouble with is then closing the detailed view if the same 'i' was clicked.

function toggleDetailsView() {
    let parentId;
    if (dom.$detailsView.is(':hidden')) {
      showDetailsView();
      parentId = $(this).parent('tr').get(0).id;
    } else {
      if (parentId) {
        console.log(parentId);
        if (parentId !== $(this).parent('tr').get(0).id) {
          hideDetailsView();
        }
      }
    }
  }`

Therefore, I thought I could store the id of each row (each tr has a unique id) and then compare the two id's. If the detailed view is open and the id's are the same, close the detailed views. If the detailed view is open and the id's are different keep the detailed views open. If the detailed view is hidden just make it visible. I am trying to do that in the second function but I'm running into some issues. Namely, I'm just not sure how to store the prev and current id of the element to check against them.

function toggleDetailsView() {
    const initialParentId = $(this).parent('tr').get(0).id;
    let nextParentId;
    if (dom.$detailsView.is(':hidden')) {
      showDetailsView();
    } else if (dom.$detailsView.is(':visible')) {
      nextParentId = $(this).parent('tr').get(0).id;
      if (nextParentId === initialParentId) {
        hideDetailsView();
        } else if (nextParentId !== initialParentId) {
        showDetailsView();
      }
    }
  }`

Thanks to anyone who is able to help!

Ash
  • 81
  • 1
  • 9
  • 1
    One quick way to store the state of an element is to give it a class that describes its state. You know what was just clicked because it is likely to come in as 'this' in your event handler. Check its class, and/or classes of others around it; change as needed. That has the advantage of allowing you to control visibility as well, in the CSS. –  Apr 21 '20 at 20:46
  • Thank you! Unfortunately I don't have access to update the CSS. I did however just took another look at the code and there is a class that is applied when the element is clicked class = 'DocumentIconPanelSelected'. Maybe I could use that, but I still somehow need to know if the element I just clicked is the same or different than the previously selected element. – Ash Apr 21 '20 at 20:53
  • Wait a minute - of course you have access to the CSS. JavaScript has the ability to add and remove classes. -- https://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery#2156090 –  Apr 21 '20 at 21:00
  • Well of course, I guess I meant our actual CSS files. – Ash Apr 21 '20 at 21:02
  • 1
    Right. You don't need access to the actual css files, and my solution does not suggest or require it. Start with all the elements with whatever classes they have in css. Fine. Now when you click on one, add some new class - say, 'wasClicked'. OK. Now when the next click comes, look around for who already has the 'wasClicked' class. Add and remove as you so desire. –  Apr 21 '20 at 21:05
  • Gotcha, I think then I should just be able to use this class that is applied when it is clicked 'documentPanelSelected'. – Ash Apr 21 '20 at 21:13
  • Yes, certainly. If it gets in there automatically, check for it and be happy! –  Apr 21 '20 at 21:13
  • Actually, that isn't working for me. I somehow need to compare the first clicked item to the second clicked item but I am having a hard time doing that comparison. Because, the item I click ALWAYS has that class of 'DocumentPanelSelected' I need to know if the item I am currently clicking is the same or different than the one I clicked before. – Ash Apr 21 '20 at 22:16
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212213/discussion-between-yishmeray-and-ash). –  Apr 21 '20 at 23:55

1 Answers1

0

The answer above worked however my issue was with my variable scope. I needed to initilaize my 'previous' element outside of my function. 

let previousId = null;

function toggleDetailsView() {
    const currentId = event.target.closest('tr').id;
    if (dom.$detailsView.is(':hidden')) {
      showDetailsView();
    }
    else if (dom.$detailsView.is(':visible')) {
      if (previousId === currentId) {
        hideDetailsView();
      }
    }
    previousId = currentId;
  }
Ash
  • 81
  • 1
  • 9