Changing images with buttons

Ask the community
,
1

Working in
Dev Mode

What I’m trying to do
I’m trying to use buttons to show specific sections that I have collapsed on the page. I’ve already coded the buttons to expand on their specific section when pressed but they don’t automatically switch to a different section when you click a different button.

Example of what the code does:
I press “iconbutton1”, it expands “section5”. I click “iconbutton2”, it expands “section4” but doesn’t collapse “section5”. I have to click “iconbutton1” one more time so that “section5” collapsed and I can see “section4”.

Here’s the code:

$w.onReady(function (){

let isExpanded = false;// Track the state of the section

$w(“#iconButton1”).onClick(() => {

if (isExpanded){

$w(“#section5”).collapse();

} else {

$w(“#section5”).expand();

}

isExpanded = !isExpanded; // Toggle the state

});

});

$w(‘#iconButton1’).onClick((event) => {

})

$w.onReady(function (){

let isExpanded = false;// Track the state of the section

$w(“#iconButton2”).onClick(() => {

if (isExpanded){

$w(“#section6”).collapse();

} else {

$w(“#section6”).expand();

}

isExpanded = !isExpanded; // Toggle the state

});

});

$w(‘#iconButton2’).onClick((event) => {

})

$w.onReady(function (){

let isExpanded = false;// Track the state of the section

$w(“#iconButton3”).onClick(() => {

if (isExpanded){

$w(“#section4”).collapse();

} else {

$w(“#section4”).expand();

}

isExpanded = !isExpanded; // Toggle the state

});

});

$w(‘#iconButton3’).onClick((event) => {

})

2 
$w.onReady(function () {
  const buttonSectionMap = {
    "#iconButton1": "#section5",
    "#iconButton2": "#section6",
    "#iconButton3": "#section4"
  };

  let currentExpandedSection = null;

  function hideAllSections() {
    Object.values(buttonSectionMap).forEach((sectionId) => {
      if ($w(sectionId).isVisible) {
        $w(sectionId).hide("fade", { duration: 300 });
      }
    });
  }

  Object.keys(buttonSectionMap).forEach((buttonId) => {
    $w(buttonId).onClick(() => {
      const sectionId = buttonSectionMap[buttonId];

      if (currentExpandedSection === sectionId) {
        $w(sectionId).hide("fade", { duration: 300 });
        currentExpandedSection = null;
      } else {
        hideAllSections();
        $w(sectionId).show("slide", { direction: "bottom", duration: 400 });
        currentExpandedSection = sectionId;
      }
    });
  });
});

…or even this one …

$w.onReady(function () {
  const buttonSectionMap = {
    "#iconButton1": "#section5",
    "#iconButton2": "#section6",
    "#iconButton3": "#section4"
  };

  let currentExpandedSection = null;

  const defaultButtonColor = "#cccccc";
  const activeButtonColor = "#007bff";

  function hideAllSections() {
    Object.values(buttonSectionMap).forEach((sectionId) => {
      if ($w(sectionId).isVisible) {
        $w(sectionId).hide("fade", { duration: 300 });
      }
    });
  }

  function resetButtonStyles() {
    Object.keys(buttonSectionMap).forEach((buttonId) => {
      $w(buttonId).style.backgroundColor = defaultButtonColor;
      $w(buttonId).style.color = "#000000";
    });
  }

  Object.keys(buttonSectionMap).forEach((buttonId) => {
    $w(buttonId).onClick(() => {
      const sectionId = buttonSectionMap[buttonId];

      if (currentExpandedSection === sectionId) {
        $w(sectionId).hide("fade", { duration: 300 });
        resetButtonStyles();
        currentExpandedSection = null;
      } else {
        hideAllSections();
        resetButtonStyles();
        $w(buttonId).style.backgroundColor = activeButtonColor;
        $w(buttonId).style.color = "#ffffff";
        $w(sectionId).show("slide", { direction: "bottom", duration: 400 });
        currentExpandedSection = sectionId;
      }
    });
  });
});
3

That works but I want my sections to be collapsed. not hidden. Is there any way to code it to change the section shown based on the button pressed while automatically collapsing all other sections? (it doesn’t matter if the other sections are already collapsed or not)

4 
$w.onReady(function () {
  const buttonSectionMap = {
    "#iconButton1": "#section5",
    "#iconButton2": "#section6",
    "#iconButton3": "#section4"
  };

  let currentExpandedSection = null;

  const defaultButtonColor = "#cccccc";
  const activeButtonColor = "#007bff";

  // Collapse all sections
  function collapseAllSections() {
    Object.values(buttonSectionMap).forEach((sectionId) => {
      if (!$w(sectionId).collapsed) {
        $w(sectionId).collapse();
      }
    });
  }

  // Reset button colors
  function resetButtonStyles() {
    Object.keys(buttonSectionMap).forEach((buttonId) => {
      $w(buttonId).style.backgroundColor = defaultButtonColor;
      $w(buttonId).style.color = "#000000";
    });
  }

  // Add click handlers
  Object.keys(buttonSectionMap).forEach((buttonId) => {
    $w(buttonId).onClick(() => {
      const sectionId = buttonSectionMap[buttonId];

      if (currentExpandedSection === sectionId) {
        // Collapse current section if it's already expanded
        $w(sectionId).collapse();
        resetButtonStyles();
        currentExpandedSection = null;
      } else {
        // Collapse all and expand the selected one
        collapseAllSections();
        resetButtonStyles();
        $w(buttonId).style.backgroundColor = activeButtonColor;
        $w(buttonId).style.color = "#ffffff";
        $w(sectionId).expand();
        currentExpandedSection = sectionId;
      }
    });
  });
});
5

can you please explain this code? i’m new to JavaScript and don’t understand why you’re putting background and button colors in the script

6

If you need it more simple —>

$w.onReady(function () {
  const buttonSectionMap = {
    "#iconButton1": "#section5",
    "#iconButton2": "#section6",
    "#iconButton3": "#section4"
  };

  // Collapse all sections
  function collapseAllSections() {
    Object.values(buttonSectionMap).forEach(sectionId => {
      if (!$w(sectionId).collapsed) {
        $w(sectionId).collapse();
      }
    });
  }

  // Add click handlers
  Object.keys(buttonSectionMap).forEach(buttonId => {
    $w(buttonId).onClick(() => {
      const sectionId = buttonSectionMap[buttonId];
      
      if ($w(sectionId).collapsed) {
        collapseAllSections();
        $w(sectionId).expand();
      } else {
        $w(sectionId).collapse();
      }
    });
  });
});

Simplified version:
Collapses all other sections when a new one is expanded.
Collapses a section if its button is clicked again.
All other additional stuff has been removed.

7

thank you so much!!!

1 Like