Update public/js/add_content.js

public/js/add_content.js

@@ -79,14 +79,7 @@ function addcontent(item) {
     var sdgProjectLink = item.sdgImage;
     var customColor = '#8A2BE2';
 
-    sdgProjectHTML = `<a class="sdg-button btn btn-sm btn-outline-" style="color: ${customColor}; border-color: ${customColor};" 
-                        href="javascript:void(0);"
-                        onclick="toggleImage('${sdgProjectLink}'); changeColor(this, 'lilac');" 
-                        onmouseover="hoverEffect(this, 'white', 'lilac');" 
-                        onmouseout="hoverEffect(this, '${customColor}', 'white');">
-                        SDG Projekt
-                        <img id="sdgImage" src="" alt="SDG Project Image" style="max-width: 100%; max-height: 100%; display: none;">
-                    </a> &nbsp;`;
+      sdgProjectHTML = `<a class="sdg-button btn btn-sm btn-outline-" style="color: white; border-color: ${customColor};" href="javascript:void(0);"onclick="toggleImage('${sdgProjectLink}'); changeColor(this, '${customColor}');" onmouseover="hoverEffect(this, 'lilac', 'white');"onmouseout="hoverEffect(this, '${customColor}', 'white');">SDG Projekt <img id="sdgImage" src="" alt="SDG Project Image" style="max-width: 100%; max-height: 100%; display: none;"></a> &nbsp;`;
     }
 
 
@@ -214,11 +207,12 @@ function addTeam(item) {
   }
 }
 
-function toggleImage(imageLink) {
+function toggleImage(imageLink, element) {
     var imageElement = document.getElementById('sdgImage');
     if (imageElement.src === imageLink) {
         imageElement.src = '';
         imageElement.alt = '';
+        element.style.backgroundColor = ''; // Reset background color on image hide
     } else {
         imageElement.src = imageLink;
         imageElement.alt = 'SDG Project Image';